记录一下小程序动画的实现
先看布局文件wxml
代码也贴出来
<view class='container'> <!-- animation="{{animationRo}}" bindtap='animate' --> <view class='logo_layout1' animation="{{animationRo}}" bindtap='animate'> <image class='logo' src='../../images/wenzi.gif' mode='aspectFill'></image> <text class='logo_name' mode="aspectFit" >拍蚊子</text> </view> <!-- <commonDialog dialogTitle="开始游戏" dialogText='确定开始吗' sureText='确定' cancleText='取消'></commonDialog> --></view>js 代码如下：
onShow: function () { var that = this; setTimeout(function(){ var animate = wx.createAnimation({ duration:1000, timingFunction:'linear', delay:0, transformOrigin:'50% 50% 0' }); animate.rotate(90).step(); that.setData({ animationRo:animate.export(), }); },500); },思路很简单
先在布局里给view设置animation属性，然后在js文件里wx.createAnimation创建animation，最后把创建的animation用this.setData的方法设置给view的animation属性即可。
公众号：程序员的日记，持续分享程序员界的日常生活，职业历程，行业资讯，欢迎关注
