uni-app animation动画

uni.createAnimation(OBJECT)

官方文档

官方是这么描述animation动画的过程:

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

接下来我就一一说明

如何使用uniapp动画

先说需求, 点击按钮小猫开始运动

首先在元素上绑定动画(:animation="animationData")

<view :animation="animationData" class="animation"><image src="../../static/猫.png"></image>
</view>
<button @click="running" >别跑</button>

这一步是把animationData数据传递给animation属性

  export default {data() {return {animationData: {}// 在data中初始化animationData}},onUnload() {this.animationData = {}// 页面关闭后清空数据},onload(){this.animation = uni.createAnimation()  // 创建动画实例},methods: {running() {this.animation.translateX(500).step({duration:1000})// 调用实例的方法来描述动画,translateX定义动画类型为x轴偏移, 500为偏移长度, 单位px// 调用 step() 来表示一组动画完成(当前参数动画时间1s)// step 可以配置参数用于指定当前组动画的配置。具体参数请看文档this.animationData = this.animation.export()// export方法导出动画数据}}}

一个动画就定义好了
下面来看效果

总结一下

链式动画

可以在step()之后紧接第二个动画, 类似promise写法

this.animation.translateX(100).step().translateY(100).step().translateX(0).step().translateY(0).step()

效果

动画多次触发

如果动画完成后, 元素未回到初始位置, 第二次动画是无法触发的
有两种方法使元素回到原位

通过链式操作

在动画最后在添加一个动画的, 效果是返回原位(透明度,动画时间都是0)

this.animation.translateX(200).step({duration:700}).translateX(0).opacity(0).step({duration:0})

设置timeout

如果动画时间是0.7s, 那就在0.8s之后使用动画让元素返回
timeout调用时间在动画完成之后
同样duration,opacity都为0

running() {this.animation = uni.createAnimation()this.animation.translateX(200).step({duration:700})this.animationData = this.animation.export()setTimeout(()=>{this.animation.translateX(0).opacity(0).step({duration:0})this.animationData = this.animation.export()}, 800);}

效果

uni-app animation动画相关推荐

【Android 基础】Animation 动画介绍和实现
转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...
用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
android 实现控件搜索折叠效果 Animation动画折叠和普通折叠
android 实现控件搜索折叠效果 Animation动画折叠和普通控件直接折叠效果: 原理很简单,都是获取对应的高度,通过实现高度变化而改变显示效果: 话不多说直接上代码 1.普通折叠效果,以下是 ...
【Android 基础】Animation 动画介绍和实现（转载）
最近做了下这方面的研究,在博客园上找到了一片很好很详细的文章,于是转了一下.原地址是http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Anima ...
用Animation动画实现Android应用的欢迎界面
转载自:http://smallmaple.iteye.com/blog/1255120 欢迎界面实现有多种方法,目前了解的实现方法包括 1) Animation; 2) 线程实现; 3) Handl ...
Animation动画之alpha
一.Android的Anotation由四种类型构成:alpha,scale,translate,rotate; 二.在xml配置文件中 alpha: 渐变透明度动画效果; scale: 渐变尺寸缩放 ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...