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>