微信小程序开发之——动画-Animation(3)

一概述

wx.createAnimation创建Animation动画实例
wx.createAnimation时，参数的常用属性
动画常见动作
动画执行完成之后导出动画队列(export)

二 wx.createAnimation创建Animation动画实例

2.1 默认的

this.animation = wx.createAnimation()

2.2 自己指定参数

this.animation=wx.createAnimation({duration: 1000,timingFunction: 'ease'})

2.3 说明(this.animation)

this.animation：布局文件中，需要执行动画操作的对象

三 wx.createAnimation时，参数的常用属性

属性	类型	说明
duration	number	动画持续时间，单位 ms
timingFunction	string	动画的效果
delay	number	动画延迟时间，单位 ms
transformOrigin	string

timingFunction(动画效果)

属性	说明
‘linear’	动画从头到尾的速度是相同的
‘ease’	动画以低速开始，然后加快，在结束前变慢
‘ease-in’	动画以低速开始
‘ease-in-out’	动画以低速开始和结束
‘ease-out’	动画以低速结束
‘step-start’	动画第一帧就跳至结束状态直到结束
‘step-end’	动画一直保持开始状态，最后一帧跳到结束状态

四动画常见动作

Animation.opacity：透明动画
Animation.rotate：选择动画
Animation.scale：缩放动画
Animation.skew：倾斜动画
Animation.translate：平移动画

五动画执行过程

this.animation = wx.createAnimation()：执行动画赋值
动画动作(透明、旋转、缩放等)
this.animation…step()：表示一组动画完成
this.animation.export()：导出动画队列。export 方法每次调用后会清掉之前的动画操作

六示例

6.1 布局文件(index.wxml)

<view class="anim-pic">
<image src="/images/rocket.png" animation="{{animated}}"></image>
</view>
<view class="anim-btns"><button bindtap="rotate">旋转</button>
</view>

6.2 样式文件(index.wxss)

.anim-pic {width: 300rpx;height: 300rpx;margin: 40rpx auto;
}
.anim-pic image{width: 300rpx;height: 300rpx;
}
.anim-btns button{border: 1px solid orange;
}

6.3 逻辑文件(index.js)

Page({onReady: function () {this.animated=wx.createAnimation({duration: 1000,timingFunction: 'ease'})},rotate: function () {this.animated.rotate(Math.random()*720-360).step()this.setData({animated:this.animated.export()})}
})

6.4 效果图

七参考

小程序官方文档—Animation

微信小程序开发之——动画-Animation(3)相关推荐

微信小程序开发之——动画-帧动画(2)
一概述通过this.animate(selector, keyframes, duration, callback)实现关键帧动画 selector:要执行动画的组件id keyframes:关键 ...
微信小程序开发动感十足的加载动画--都在这里！
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述我们在学习微信小程序时,应该会遇到载入图片或者动画需要等待的情况,那么这个等待的画面我们应该怎么编写呢?今天我们就分享这样的小教程. ...
微信小程序开发03-这是一个组件
编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序开发（四）入门之打卡功能开发
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言本篇文章将介绍打卡小程序打卡页面相关功能的 ...
微信小程序开发初试实例结算小助手
微信小程序开发初试实例结算小助手小程序码创作背景小程序功能小程序实现小程序开发方案(想看源代码,直接看这一项) 本着自己参加过学校组织的微信小程序云开发培训,就抱着尝试的心理去参加今年的高校 ...
《微信小程序开发实战》课后题
黑马程序员版<微信小程序开发实战> 第一章填空题 1.微信小程序可以通过________方式打开. 答案:扫描二维码 2.微信开发者工具中的上传是指将代码上传到________. 答案: ...
自学微信小程序开发第二天-事件处理、数据流
自学微信小程序开发第二天-事件处理.数据流事件处理绑定冒泡事件阻止冒泡事件互斥事件事件传参事件对象的属性数据流实例:登录页面案例之前学习了微信小程序开发的相关环境,测试了小程序开发工 ...
微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...

微信小程序开发之——动画-Animation(3)

一概述

二 wx.createAnimation创建Animation动画实例

2.1 默认的

2.2 自己指定参数

2.3 说明(this.animation)

三 wx.createAnimation时，参数的常用属性

timingFunction(动画效果)

四动画常见动作

五动画执行过程

六示例

6.1 布局文件(index.wxml)

6.2 样式文件(index.wxss)

6.3 逻辑文件(index.js)

6.4 效果图

七参考

微信小程序开发之——动画-Animation(3)相关推荐

最新文章

热门文章

微信小程序开发之——动画-Animation(3)

一 概述

二 wx.createAnimation创建Animation动画实例

2.1 默认的

2.2 自己指定参数

2.3 说明(this.animation)

三 wx.createAnimation时，参数的常用属性

timingFunction(动画效果)

四 动画常见动作

五 动画执行过程

六 示例

6.1 布局文件(index.wxml)

6.2 样式文件(index.wxss)

6.3 逻辑文件(index.js)

6.4 效果图

七 参考

微信小程序开发之——动画-Animation(3)相关推荐

最新文章

热门文章

一概述

四动画常见动作

五动画执行过程

六示例

七参考