微信小程序-动画

文章目录

微信小程序-动画

概述

通过调用 wx.createAnimation() 方法创建 Animation 实例。

复制代码
let animation = wx.createAnimation(Object)

再通过调用 Animation 的各方法实现动画效果。

wx.createAnimation()方法:

选项 类型 说明
duration number 动画持续事件,单位为毫秒,默认值为 400
timingFunction string 动画的效果,默认值为 linear
delay number 动画延迟执行的事件,单位为毫秒,默认值为 0
transformOrigin string 设置旋转元素的基点位置,默认值为 50% 50% 0,这3个值分别表示 x轴、y轴、z轴

timingFunction合法值:

合法值 说明
linear 动画全程线性速度
ease 动画先低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始
ease-in-out 动画以低速开始和结束
ease-out 动画以低速结束
step-start 动画第一帧就跳至结束状态知道结束
step-end 动画一直保持开始状态,最后一帧跳到结束状态

Animation方法:

方法 说明
rotate(number angle) 旋转。从原点顺时针旋转一个角度,角度取值范围为 [-180,180]
export() 导出动画队列。export() 方法每次调用后会清掉之前的动画操作
scale(number sx, number sy) 缩放。当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数,在 Y 轴缩放 sy 倍数
translate(number tx, number ty) 平移。当仅有该参数时表示在 X 轴偏移 tx,单位 px,在 Y 轴平移的距离,单位为 px
skew(number ax, number ay) 倾斜。对 X 轴坐标倾斜的角度,范围 [-180, 180],对 Y 轴坐标倾斜的角度,范围 [-180, 180]
step(Object object) 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
opacity(number value) 设置透明度,范围为 0~1
backgroundColor(string value) 设置背景色
width(number|string value) 设置宽度
top(number|string value) 设置 top 值

使用

xml 复制代码
<view class="anim-pic">
  <image src="/images/img.png" animation="{{animation}}" />
</view>
<view class="anim-btns">
  <button bind:tap="rotate">旋转</button>
  <button bind:tap="scale">缩放</button>
  <button bind:tap="translate">移动</button>
  <button bind:tap="skew">倾斜</button>
  <button bind:tap="rotateAndScale">同时旋转和缩放</button>
  <button bind:tap="rotateThenScale">先旋转后缩放</button>
  <button bind:tap="all">同时展示全部</button>
  <button bind:tap="allOrder">按顺序展示全部</button>
  <button class="reset" bind:tap="reset">重置</button>
</view>
js 复制代码
Page({
  data: {
    animation: {}
  },
  /** 旋转 */
  rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 缩放 */
  scale: function () {
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 平移 */
  translate: function () {
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 倾斜 */
  skew: function () {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 同时旋转和缩放 */
  rotateAndScale: function () {
    this.animation.rotate(Math.random() * 720 - 360)
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 先选择后缩放 */
  rotateThenScale: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.animation.scale(Math.random() * 2).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 同时旋转、缩放、平移、倾斜 */
  all: function () {
    this.animation.rotate(Math.random() * 720 - 360)
    this.animation.scale(Math.random() * 2)
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 按顺序执行:旋转、缩放、平移、倾斜 */
  allOrder: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.animation.scale(Math.random() * 2).step()
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({
      animation: this.animation.export()
    })
  },
  /** 重置 */
  reset: function () {
    this.animation.rotate(0).scale(1).translate(0, 0).skew(0, 0).step({
      duration: 0
    })
    this.setData({
      animation: this.animation.export()
    })
  },
  /
  onReady: function () {
    this.animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "ease"
    })
  }
})
相关推荐
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
Brianna Home1 天前
从零到一:用Godot打造2D游戏《丛林探险》
算法·游戏·性能优化·游戏引擎·bug·godot·动画
一匹电信狗1 天前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_915921431 天前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
Q_Q19632884751 天前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
韩立学长1 天前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
2501_915918411 天前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview
流***陌2 天前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
亮子AI2 天前
【小程序】微信小程序点击效果(view、button、navigator)
微信小程序·小程序