时间:2021-05-18
微信小程序——简易动画案例
wxml:
<view class="container"><view animation="{{animation}}" class="view">我在做动画</view></view><button type="primary" bindtap="translate">旋转</button>js:
//jsPage({ data: { }, onReady: function () { // 页面渲染完成 //实例化一个动画 this.animation = wx.createAnimation({ // 动画持续时间,单位ms,默认值 400 duration: 400, /** * http://cubic-bezier.com/#0,0,.58,1 * linear 动画一直较为均匀 * ease 从匀速到加速在到匀速 * ease-in 缓慢到匀速 * ease-in-out 从缓慢到匀速再到缓慢 * * http:///articles/neqMVr * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过 * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过 */ timingFunction: 'ease', // 延迟多长时间开始 delay: 100, /** * 以什么为基点做动画 效果自己演示 * left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100% * top center bottom是垂直方向的取值,其中top=0%;center=50%;bottom=100% */ transformOrigin: 'left top 0', success: function (res) { console.log(res) } }) }, /** *位移 */ translate: function () { //x轴位移100px this.animation.translate(100, 0).step() this.setData({ //输出动画 animation: this.animation.export() }) }})如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了微信小程序开发animation心跳动画,供大家参考,具体内容如下1、微信小程序开发animation心跳动画wxml文件中:投票js文件中
微信小程序实现animation动画,具体内容如下1.创建动画实例wx.createAnimation(OBJECT)创建一个动画实例animation。调用实
微信小程序与php实现微信支付的简单实例小程序访问地址:payfee.PHP:include'WeixinPay.php';$appid='';$openid=
微信小程序slider的简单实例实现效果图:微信小程序slider应用,可加减的slider控制{{v.name}}-+页面结构Page({data:{cont
【怎么做微信小程序】如何制作自己的微信小程序?制作简单的微信程序开发周期有多长?制作微信小程序要花多少钱?如何使用Python开发微信小程序?如何通过微信小