后浪云百度小程序教程：swan.createAnimation

后浪云

2022-6-22

小程序

swan.createAnimation
- 方法参数
  - 返回值
  - object 参数说明
  - timingFunction 有效值
- 示例
  - 代码示例 1
  - 代码示例 2：参数默认值
  - 代码示例 3：timingFunction

swan.createAnimation

解释：创建一个动画实例 animation 。

方法参数

Object object

返回值

Animation

object 参数说明

属性名	类型	必填	默认值	说明
duration	Number	否	400	动画持续时间（单位：ms）
timingFunction	String	否	‘linear’	定义动画的效果
delay	Number	否	0	动画延迟时间（单位：ms）
transformOrigin	String	否	‘50% 50% 0’	动画

timingFunction 有效值

值	说明
linear	以相同速度开始至结束
ease	慢速开始，然后变快，然后慢速结束
ease-in	慢速开始的过渡效果
ease-in-out	动画以低速开始和结束
ease-out	动画以低速结束
step-start	动画第一帧就跳至结束状态直到结束
step-end	动画一直保持开始状态，最后一帧跳到结束状态

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1

SWAN
JS
CSS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="animation-element-wrapper flexTop">
  
  
   <view class="animation-element" animation="{{animation}}"></view>
  
  
   </view>
  
  
   <view class="card-area flexBottom swan-security-padding-bottom" style="height:{{isIPhoneX ? 5.7 : 4.1}}rem">
  
  
   <view class="top-description border-bottom">展示动画</view>
  
  
   <scroll-view scroll-y class="scroll">
  
  
   <button type="primary" bindtap="rotate">旋转</button> 
  
  
   <button type="primary" bindtap="scale">缩放</button> 
  
  
   <button type="primary" bindtap="translate">移动</button> 
  
  
   <button type="primary" bindtap="skew">倾斜</button> 
  
  
   <button type="primary" bindtap="rotateAndScale">旋转并缩放</button> 
  
  
   <button type="primary" bindtap="rotateThenScale">旋转后缩放</button> 
  
  
   <button type="primary" bindtap="all">同时展示全部动作</button> 
  
  
   <button type="primary" bindtap="allInQueue">顺序展示全部动作</button> 
  
  
   <button bindtap="reset">还原</button> 
  
  
   </scroll-view>
  
  
   </view>
  
  
  </view>

代码示例 2：参数默认值

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  
  
  </view>

代码示例 3：timingFunction

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  
  
  </view>

作者：后浪云

链接：https://www.idc.net/help/186679/

文章版权归作者所有，未经允许请勿转载。

THE END