uniapp 点击动画_uni-app animation动画
##? uni.createAnimation(OBJECT)
[官方文档](https://uniapp.dcloud.io/api/ui/animation?id=createanimation)
官方是这么形容animation动画的过程:
创立一个动画实例 animation。调用实例的方法来形容动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
接下来我就逐个说明
### 如何使用uniapp动画
先说需求, 点击按钮小猫开始运动
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xOS8xNmU3ZjU2ZjdhZTA2ODk3?x-oss-process=image/format,png)
首先在元素上绑定动画(`:animation="animationData"`)
```
? ?
别跑
```
这一步是把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方法导出动画数据
? ? ? }
? ? }
? }
```
一个动画就定义好了
下面来看效果
![](https://img.songma.com/wenzhang/20200120/kteujlrf1zv2903.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjc5Mzc0,size_16,color_FFFFFF,t_70)
### 链式动画
可以在step()之后紧接第二个动画, 相似promise写法
```
this.animation.translateX(100).step()
? ? .translateY(100).step()
? ? .translateX(0).step()
? ? .translateY(0).step()
```
效果
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xOS8xNmU3ZjkxYTE3NjZiNjUy?x-oss-process=image/format,png)
### 动画屡次触发
假如动画完成后, 元素未回到初始位置, 第二次动画是无法触发的
有两种方法使元素回到原位
#### 通过链式操作
在动画最后在增加一个动画的, 效果是返回原位(透明度,动画时间都是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);
? ? ? }
```
效果
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMS8xOS8xNmU3ZjllNTQ2MjNjMWM1?x-oss-process=image/format,png)
uniapp 点击动画_uni-app animation动画相关推荐
- android 动画制作软件下载,动画工场app下载-动画工场 安卓版v1.0.23-PC6安卓网
动画工场app是一款模块化轻松制作动画的客户端应用,动画工场软件中用户可以提供的素材模板任意更改文字素材等等,动画工场支持自由编辑,随意组合镜头. 软件介绍 动画工场app是一款模块化的动画制作APP ...
- js 监听css3动画的执行,animation动画暂停
CSS 动画播放时,会发生以下三个事件: animationstart -CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - C ...
- unity 角色 动画脚本_Unity Animation --动画剪辑(外部来源的动画)
外部来源的动画 来自外部源的动画以与常规3D文件相同的方式导入到Unity中.这些文件,无论是通用FBX文件还是3D软件(例如Autodesk®Maya®,Cinema 4D,Autodesk®3ds ...
- Animation动画概述和执行原理
动画入门和进阶文章列表: Animation动画概述和执行原理 Android动画之补间动画TweenAnimation Android动画之逐帧动画FrameAnimation Android动画之 ...
- Android Animation动画原理源码分析
Android 平台提供了三类动画,一类是 Tween 动画-Animation,即通过对场景里的对象不断做图像变换 ( 平移.缩放.旋转 ) 产生动画效果:第二类是 Frame 动画,即顺序播放事先 ...
- layaAir引擎制作游戏的图集动画、时间轴动画、和骨骼动画总结二
一.角色序列帧.ani动画的制作 1.在项目管理器中创建动画文件 2.创建动画模板,编辑动效名称 3.编辑序列帧动画 .ani格式动画的代码控制 1.动画加载loadAnmition() 2.播放与停 ...
- UNIAPP点击动画 animation 点击动效
UNIAPP点击动画 animation 例子 <view :animation="animationData" style="background:red;hei ...
- uni-app animation动画
uni.createAnimation(OBJECT) 官方文档 官方是这么描述animation动画的过程: 创建一个动画实例 animation.调用实例的方法来描述动画.最后通过动画实例的exp ...
- uniapp 点击动画_uni-app 点击元素左右抖动效果
点击 data() {return{ animation:'', //动画样式 } }, methods: { sidebarClick () {this.animation = 'shake'; s ...
- uniapp - animation动画数组无效
问题描述: 在开发uniapp时发现,在使用数组来存储动画的场景下动画总是不生效 通过多次尝试发现 1. 在方法中临时创建的animation实例导出的数据不是reactive的 2. 数组并没有监控 ...
最新文章
- DataGrid基于Access的快速分页法
- 【linux】ubuntu14.04升级dbus到1.13.8,杯具了,无法进入桌面
- 服务器搭建邮件自动回复,在postfix邮件系统上搭建自动回复邮件系统
- Java 9 - 17 特性解读:​Java 13
- uefi装完系统后无法引导_系统安装完后再设置uefi启动 - 卡饭网
- Touch - 全能名片王
- MySQL高级 - 锁 - InnoDB行锁 - 总结
- python对分组进行排序_如何按排序顺序将列表中的项目分组?
- 无需担心架构演变 入云的Teradata无处不在
- function 多个函数用一个_用递归函数和栈逆序一个栈
- 阿里问题定位神器 Arthas 操作实践,定位线上BUG,超给力
- OpenStack云计算快速入门之三:OpenStack镜像管理
- Canvas API - 江苏黑马 - 博客园
- 什么时候使用PD和PI——基于平衡小车分析
- 利用 echarts 绘制江苏省的地图之三
- 世界各国GDP排名(1960-2018)
- python可以做ui吗_python做ui
- 嵌入式知识-ARM裸机-学习笔记(2):利用GPIO来控制LED(附mkv210_image.c文件解析)
- 网络知识-03 数据链路层-以太网
- 【三维激光扫描】第五章:基于点云数据的立面图绘制及三维建模
热门文章
- (ONENET+阿里云+datav+node+js+MYSQL+STM32)基于ONENET的大数据可视化平台搭建
- OpenXML标签含义
- android 经纬度 谷歌,android:GPS获取location经纬度并用谷歌解析为地理位置名称
- java你的线上欧美_JAVA 线上故障排查全套路
- 华为薪酬(2002年左右)
- android分享微信获取资源失败怎么办,android 调用系统分享微信失败:获取资源失败...
- 如何提高团队的工作效率
- JN5169 Bootload 烧录过程和DIY烧录程序(一)
- iAd框架详细解析 —— ASM
- python之小坑:IndentationError: expected an indented block