小程序動畫效果詳解

一、氣球彈出

小程序中的氣球彈出效果是一種常見的提示動畫，可以引導用戶注意到消息的到來，讓用戶快速作出回應。

該效果通過使用微信官方的wx.createAnimation()方法和transition屬性實現。

// JavaScript 代碼
// 創建動畫對象
var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease-out',
  delay: 0,
  transformOrigin: '50% 50% 0'
})

// 爆炸效果
animation.scale(3).opacity(0).step()

// 回彈效果
animation.scale(0.3).opacity(1).step({ duration: 100 })

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// HTML代碼
<view class="balloon-box"
  animation="{{animationData}}"
  catchtap="onTapBalloon">
  <image class="balloon" src="/images/balloon.png" />
  <view class="tip">您有一條新消息</view>
</view>

二、微信小程序動畫效果

微信小程序支持多種動畫效果，包括基本動畫、組合動畫和路徑動畫等。

其中基本動畫包括位置、旋轉、縮放和透明度等四個屬性，可以通過wx.createAnimation()方法進行定義和操作。

// JavaScript代碼
var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease-out',
  delay: 0,
  transformOrigin: '50% 50% 0'
})

// 旋轉動畫
animation.rotate(360).step()

// 縮放動畫
animation.scale(2).step()

// 移動動畫
animation.translateX(100).step()

// 透明度動畫
animation.opacity(0.5).step()

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// HTML代碼
<view animation="{{animationData}}">動畫效果</view>

三、小程序動畫效果如何實現循環

小程序中的動畫效果可以通過設置animation的options屬性實現循環播放。

options中的屬性可以設置動畫的延時與間隔、持續時間、重複次數等。

// JavaScript代碼
var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease-out',
  delay: 0,
  transformOrigin: '50% 50% 0',
  options: {
    delay: 1000, // 延時1秒播放
    duration: 5000, // 持續時間5秒
    iterations: Infinity // 無限循環
  }
})

// 縮放動畫
animation.scale(2).step()

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// HTML代碼
<view animation="{{animationData}}">動畫效果</view>

四、小程序加入購物車動畫效果

小程序中的加入購物車動畫效果可以增強用戶交互感，並提示用戶的操作已生效。

該效果通過使用transition屬性和wx.createAnimation()方法實現，同時配合CSS3的貝塞爾曲線來控制彈簧效果和回彈時間。

// JavaScript代碼
// 創建動畫對象
var animation = wx.createAnimation({
  duration: 500,
  timingFunction: 'linear'
})

// 縮放動畫
animation.scale(1.5, 1.5).step()

// 回彈動畫
animation.scale(1, 1).step({ duration: 200 })

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// CSS代碼
.bounce {
  animation: bounce .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center bottom;
}

@keyframes bounce {
  0%, 75%, 100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}

// HTML代碼
<view class="cart-icon bounce"
  animation="{{animationData}}"
  bindanimationfinish="onAnimationFinish">
  <image src="/images/cart.png" />
</view>

五、支付寶小程序動畫效果

支付寶小程序中的動畫效果同樣豐富多彩，支持多種類型的動畫效果。

其中常見的動畫類型包括淡入淡出、向上滑動、飛入和旋轉等。

// JavaScript代碼
my.createAnimation({
  duration: 500,
  timingFunction: 'ease',
  delay: 1000,
  transformOrigin: '50% 50% 0'
}).rotate(360).scale(1.5).step()

// HTML代碼
<image mode="aspectFit" class="scale-up-rotate" src="https://img.alicdn.com/tfs/TB1dDv_QpzqK1RjSZFvXXcB7VXa-200-200.png"></image>

六、小程序複雜的動畫效果

小程序中的動畫效果不僅限於基本動畫，還可以組合創建複雜的動畫效果。

例如使用transition屬性設置關鍵幀動畫、使用mask動畫實現頁面過渡效果等。

// CSS代碼
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  overflow: hidden;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  transform: translateX(-100%);
  animation: slideInRight 0.5s forwards;
}

@keyframes slideInRight {
  100% {
    transform: translateX(0);
  }
}

// HTML代碼
<view class="container">
  <view class="mask" wx:if="{{showMask}}" catchtap="onTapMask"></view>
  <view>動畫效果</view>
</view>

七、小程序開屏動畫

小程序開屏動畫是指小程序在啟動時顯示的動畫效果，可以提高用戶體驗和品牌形象。

開屏動畫可以使用wx.createAnimation()方法結合transition屬性和CSS3的動畫來實現。

// JavaScript代碼
// 創建動畫對象
var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease'
})

// 縮放動畫
animation.scale(1.5).step()

// 透明度動畫
animation.opacity(0).step()

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// CSS代碼
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

// HTML代碼
<view class="splash">
  <image class="logo" src="/images/logo.png"></image>
  <view class="slogan">歡迎使用小程序</view>
  <view class="spinner" animation="{{animationData}}"></view>
</view>

八、微信小程序動畫

微信小程序中的動畫效果豐富多彩，支持多種類型的動畫效果。

常用的動畫類型包括淡入淡出、旋轉、翻轉、縮放、滑動、彈跳、抖動等。

// JavaScript代碼
// 創建動畫對象
var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  transformOrigin: '50% 50% 0'
})

// 縮放動畫
animation.scale(1.5, 1.5).step()

// 旋轉動畫
animation.rotate(180).step()

// 透明度動畫
animation.opacity(0.5).step()

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// HTML代碼
<view animation="{{animationData}}">動畫效果</view>

九、小程序加載動畫

小程序中的加載動畫是在加載過程中提示用戶正在加載的狀態，為用戶提供友好的交互體驗。

小程序中的加載動畫可以使用wx.createAnimation()方法結合transition屬性和CSS3的動畫來實現。

// JavaScript代碼
// 創建動畫對象
var animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'linear',
  transformOrigin: '50% 50% 0'
})

// 縮放動畫
animation.scale(1.5, 1.5).step()

// 旋轉動畫
animation.rotate(360).step()

// 將動畫導出到頁面
this.setData({
  animationData: animation.export()
})

// CSS代碼
@keyframes loading {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

// HTML代碼
<view class="loading">
  <view class="spinner" animation="{{animationData}}"></view>
  <view class="text">努力加載中...</view>
</view>

以上是小程序動畫效果的詳細介紹，利用小程序提供的API和CSS3的動畫效果，我們可以獲得非常棒的用戶交互體驗。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/241617.html