微信小程序-wx.createAnimation动画实现

最新推荐文章于 2025-08-05 11:52:37 发布

原创

最新推荐文章于 2025-08-05 11:52:37 发布 · 1.5w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#animation动画

本文介绍了如何使用微信小程序的wx.createAnimation API创建动画，以实现类似携程切换往返地址的效果。详细讲解了wxml、wxss和js文件中的关键实现步骤，并对wx.createAnimation的使用和参数进行了说明，强调了图片复位的重要性。

一、效果

说明：类似携程切换往返地址

二、实现

1）.wxml:

<view class="animation">
  <view class="dis-flex">
    <view class='flex3' animation="{
  
  {lAnimate}}">{
  
  {start}}</view>
    <view class='flex1' bindtap="trigger">
      <image src="../../images/change.png" class="flexImg" animation="{
  
  {imgAnimation}}"></image>
    </view> 
    <view class='flex3' animation="{
  
  {rAnimate}}">{
  
  {end}}</view>
  </view>
</view>

2).wxss:

.animation{
  margin-top: 20rpx;padding: 10rpx 30rpx;background-color: #FFFFFF;
}
.dis-flex{
  display: flex;
}
.flex1{
  flex: 1;text-align: center;
}
.flex3{
  flex: 3;text-align: center;
}
.flexImg{
  width:20px;height:20px;
}