• Animation
  • 方法参数
  • 示例
    • 图片示例
    • 代码示例 1：动画队列
    • 代码示例 2：动画样式设置
    • 代码示例 3：动画宽高设置
    • 代码示例 4：底部弹窗自定义动画（CSS 控制）
    • 代码示例 5：底部弹窗自定义动画（API 控制）
    • 代码示例 6：弹出菜单特效的实现

Animation

解释：动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

动画队列
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

方法参数

示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：动画队列

• SWAN
• JS

 


  
<view class="wrap">

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

  
</view>

 

代码示例 2：动画样式设置

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


  
<view class="wrap">

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

  
</view>

 

代码示例 3：动画宽高设置

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


  
<view class="wrap">

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

  
</view>

 

代码示例 4：底部弹窗自定义动画（CSS 控制）

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS
• CSS

 


  
<button bindtap="showshadow" type="primary">点击显示底部弹框</button>

  


  
<view class="content {{click? 'showContent': 'hideContent'}} {{option? 'open': 'close'}}" hover-stop-propagation="true">

  
 <!-- 内容 -->

  
 <view class="content-top" s-for="item in list">

  
 {{item}}

  
 </view>

  
</view>

 

代码示例 5：底部弹窗自定义动画（API 控制）

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 


  
<view class="wrap">

  
 <button bindtap="showShadow" type="primary">点击显示底部弹框</button>

  


  
 <!-- 遮罩层 -->

  
 <view class="shadow" s-if="{{chooseSize}}" bindtap="hideModal"></view>

  
 <!-- 上滑高度 -->

  
 <view class="choosen" s-if="{{chooseSize}}" animation="{{animationData}}">

  
 <!-- 内容 -->

  
 <view class="content-top" s-for="item in list">

  
 {{item}}

  
 </view>

  
</view>

 

代码示例 6：弹出菜单特效的实现

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS
• CSS

 


  
<view>

  
 <image src="/images/ai.png" class="image" animation="{{animFavor}}"></image>

  
 <image src="/images/basecontent.png" class="image" animation="{{animShare}}"></image>

  
 <image src="/images/canvas.png" class="image" animation="{{animWrite}}"></image>

  
 <image src="/images/interface.png" class="image-plus" animation="{{animPlus}}" bindtap="isPopping"></image>

  
</view>