微信小程序 动画的简单实例
2017-10-12 14:29
633 查看
微信小程序――简易动画案例
wxml:
<view class="container"> <view animation="{{animation}}" class="view">我在做动画</view> </view> <button type="primary" bindtap="translate">旋转</button>
js:
//js Page({ 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://www.tuicool.com/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() }) } })
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
您可能感兴趣的文章:
相关文章推荐
- 微信小程序 textarea 组件详解及简单实例
- 微信小程序 switch组件详解及简单实例
- 微信小程序中的onLoad详解及简单实例
- 微信小程序(应用号)简单实例应用及实例详解
- 微信小程序 this和that详解及简单实例
- 微信小程序 action-sheet 反馈上拉菜单简单实例
- 微信小程序 地图map详解及简单实例
- 微信小程序 首页制作简单实例
- 微信小程序 弹幕功能简单实例
- 微信小程序request请求后台接口php简单实例
- 微信小程序 slider的简单实例
- 微信小程序 label 组件详解及简单实例
- 微信小程序与php 实现微信支付的简单实例
- 微信小程序 下拉菜单简单实例
- 微信小程序 checkbox组件详解及简单实例
- 微信小程序开发之录音机 音频播放 动画实例 (真机可用)
- 微信小程序 video详解及简单实例
- 微信小程序 支付简单实例及注意事项
- 微信小程序 简单动画入门
- 微信小程序之网络请求简单封装实例详解