动画的基本使用:

旋转动画

缩放动画

偏移动画

倾斜动画

矩阵动画

动画API:wx.createAnimation(object)

示例:创建一个点击的动画

<view class="animation" animation="{{animationData}}" bindtap="clickBtn">
动画
</view>

page.js文件

//获取应用实例
const app = getApp()
Page({
data: {
animationData:[]
},
clickBtn:function(){
//创建动画
var animation = wx.createAnimation({
duration:400,
timingFunction:"linear",
dalay:0,
transformOrign:"50% 50% 0"
});
// 设置动画
animation.rotate(90).step();
// step 代表步
// animation.rotate(90).scale(2).step(); // 旋转放大
// animation.rotate(90).step();
// animation.scale(90).step();
// 将动画数据导出 并进行设置
this.setData({animationData:animation.export()});
}
})

微信小程序 --- 动画的更多相关文章

  1. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  2. 微信小程序动画:高度渐变,left渐变

    今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...

  3. 微信小程序动画实现(API,css)

    微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...

  4. 微信小程序动画技巧

    用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...

  5. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  6. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  7. 微信小程序——动画操作时,rpx 和 px 的转换计算。

    嫌长版本: var rpx = 10000; var systemInfo = wx.getSystemInfoSync(); var px = rpx / 750 * systemInfo.wind ...

  8. 微信小程序--动画animation

    js: list:[], contentflag:false   this.animation = wx.createAnimation({ duration: 500, timingFunction ...

  9. 微信小程序循环列表点击每一个单独添加动画

    首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微 ...

随机推荐

  1. jQuery插件扩展方法

    jQuery为扩展插件提拱了两个方法,分别是: jQuery.extend(object) —— 给jQuery对象添加方法. jQuery.fn.extend(object) —— 为扩展jQuer ...

  2. JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  3. 第二百八十九节,MySQL数据库-ORM之sqlalchemy模块操作数据库

    MySQL数据库-ORM之sqlalchemy模块操作数据库 sqlalchemy第三方模块 sqlalchemysqlalchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API ...

  4. php -- php控制linux关机、重启、注销

        php 里面有个 system(exec) 方法, 可以调用系统命令.     重启先建立一个脚本(比喻 /root/reboot_server.sh ),重启用的.//路径可随便,但最少必须 ...

  5. html -- <meta name="viewport"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  6. 7 天玩转 ASP.NET MVC — 第 2 天

    0. 前言 我相信在開始第 2 天的学习时,你已经顺利地完毕了第 1 天的课程. 我们回想一下第 1 天的主要关注点: 为什么选择 ASP.NET MVC ? ASP.NET Webforms 和 A ...

  7. 取石子(好学的C++)

    巴什博奕(Bash Game)只有一堆n个物品,两个人轮流从这堆物品中取物,规定每次至少取一个,最多取m个.最后取光者得胜. 显然,如果n=m+1,那么由于一次最多只能取m个,所以,无论先取者拿走多少 ...

  8. NPOI帮助类(Excel转DataTable、DataTable转Excel)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using NPOI.SS. ...

  9. CentOS7忘记root密码的解决方法

    开机启动centos 7.0,看到如下画面,选择下图选单,按"e"键 在下图linux16行中,将ro这两个字母修改为rw init=/sysroot/bin/sh 修改结果如下图 ...

  10. SharePoint 2010 讨论板列表内容的读取细节处理

    list.Folder表示subject,属于特殊列表,使用list.Folder遍历项,而不是使用list.Items;list.Items表示reply;list.Items[0]["P ...