微信小程序动画实现(API,css)
微信小程序动画API实现
index.js
clicktap:function(){
var Animation=wx.createAnimation({
duration: 2000,
})
Animation.rotateZ(-45).step()
this.setData({
animation:Animation.export()
})
}
index.wxml
<view>
<view class="box" animation="{{animation}}"></view>
<view class="click" bindtap="clicktap">点击</view>
</view>
index.wxss
.box{
background-color: blanchedalmond;
width: 100rpx;
height: 100rpx;
margin: auto;
margin-top: 50rpx;
}
.click{
margin: auto;
background-color: #fcc;
width: 150rpx;
text-align: center;
color: #FFf;
margin-top: 50rpx;
padding: 10rpx;
border-radius: 10rpx;
}
效果:
微信小程序动画css实现
.box {
background-color: blanchedalmond;
width: 100rpx;
height: 100rpx;
margin: auto;
margin-top: 50rpx;
animation: animation 6s linear infinite;
animation-delay: 1s
}
@keyframes animation {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(-45deg);
background-color: cadetblue;
}
100% {
transform: rotateZ(0deg);
background-color: burlywood;
}
}
效果:
给.box的父元素加个背景,.box去掉背景色,view标签换成<image></image>
,可以做出如下效果:
微信小程序动画实现(API,css)的更多相关文章
- 微信小程序的Web API接口设计及常见接口实现
微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...
- 微信小程序动画之圆形进度条
微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...
- 微信小程序动画:高度渐变,left渐变
今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...
- 微信小程序动画技巧
用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...
- 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接
为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...
- 第三篇、微信小程序-网络请求API
wx.request(OBJECT)发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 效果图: net.js Page({ data:{ result:{} ...
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
- 微信小程序如何调用API实现数据请求-wx.request()
前言 微信小程序不存在ajax,那么它是如何实现数据请求功能的呢?在微信中提供了API的调用wx.request(OBJECT),这个是很不错的.下面就讲一下如何请求数据,简单到不行. wx.requ ...
- 微信小程序动画之弹出菜单
用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...
随机推荐
- MySQL——基础查询与条件查询
基础查询 /* 语法: select 查询列表 from 表名; 类似于:System.out.println(打印东西); 1.查询列表可以是:表中的字段.常量值.表达式.函数 2.查询的结果是一个 ...
- 最新超详细VMware下CentOS系统安装
一.了解CentOS系统 CentOS是免费的.开源的.可以重新分发的开源操作系统,CentOS(Community Enterprise Operating System,中文意思是社区企业操作系统 ...
- 200行代码理解Asp.Net Core
转自https://www.cnblogs.com/xiandnc/p/11480735.html
- Coder 投稿 | mPaaS 的多版本接入(Android)
本文作者:mPaaS 用户「Q-Coder」 同时欢迎更多的开发者向 mPaaS 投稿 原文:blog.csdn.net/yqq577/article/details/116801705 前言 对于 ...
- ts 遇到的问题
1. Property 'generatePdf' does not exist on type 'Element'. 问题:ts类型校验报错,使得编译失败 解决方法:将报错字段定义为any类型
- 模块化和webpack模块化打包
模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一 ...
- 二叉搜索树判定方法(c++实现)
!!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist --- 欢迎指正--- 自己想到的方法是:使用 中序遍历数组或者链表,然后比较数组或者链表中 ...
- 刷完 900 多题后的首次总结:LeetCode 应该怎么刷?
「负雪明烛」公众号是负雪明烛维护的一个算法题解公众号,致力于帮助大家刷题.找工作.欢迎关注. 大家好,我是负雪明烛.今天跟大家聊一聊「LeetCode应该怎么刷?」这个话题. 我是大二的时候开始接触 ...
- 【LeetCode】1185. Day of the Week 解题报告(C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 计算与1971-1-1之间天数 日期 题目地址:htt ...
- 【LeetCode】984. String Without AAA or BBB 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字符串构造 日期 题目地址:https://leet ...