微信动画如何实现?微信动画的执行步骤汇总

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是微信动画如何实现?微信动画的执行步骤汇总,简单总结一下微信动画的实现及执行步骤。。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

一、实现方式

官方文档是这样说的:

①创建一个动画实例 animation。

②调用实例的方法来描述动画。

③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

因为小程序是数据驱动的,给这句话加上数字标注分为三步:

微信动画如何实现?微信动画的执行步骤汇总

前两步是定义一个动画并设置都要干什么,然后把这个设置好的“规则”扔给界面上的某个元素,让它按照这个规则执行。

当然如果有多个元素的animation=”{{ani}}”,也都会执行这个动画规则。

二、用例子说话

新建一个小程序,把没用的删掉修改一下,做个简单例子,上图

微信动画如何实现?微信动画的执行步骤汇总

代码如下:

index.wxml,一个helloworld,一个按钮

<view class="container">   <view class="usermotto" animation="{{ani}}">     <text class="user-motto">{{motto}}</text>   </view>   <button bindtap='start'>动画</button></view>

index.wxss, 为了看着方便加了个边框

.usermotto {   margin-top: 100px;   border: solid; }

index.js

Page({   data: {     motto: 'Hello World',   },   start:function(){     var animation = wx.createAnimation({       duration: 4000,       timingFunction: 'ease',       delay: 1000     });     animation.opacity(0.2).translate(100, -100).step()     this.setData({       ani:  animation.export()     })   } })

三、相关参数及方法

简单介绍一下例子中的几个参数和方法(其他的详见官方文档):

duration: 动画持续多少毫秒
timingFunction: “运动”的方式,例子中的 ‘ease’代表动画以低速开始,然后加快,在结束前变慢
delay: 多久后动画开始运行

opacity(0.2) 慢慢变透明

translate(100, -100) 向X轴移动100的同时向Y轴移动-100

step(): 一组动画完成,例如想让上例中的HelloWorld向右上方移动并变透明后,再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行, 这两种变化完成之后才会进行向左运行的一步。

demo下载地址(https://github.com/FlyLolo/WxAnimationDemo)

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 微信动画如何实现?微信动画的执行步骤汇总

发表评论

提供最优质的资源集合

立即查看 了解详情