标题
详情
作者简介
愚公搬代码
头衔
华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉
2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容
.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎
👍点赞、✍评论、⭐收藏
🚀前言随着移动互联网的快速发展，小程序以其轻便、便捷的特性，受到了越来越多用户的青睐。而在用户体验日益重要的今天，动画作为增强交互效果和视觉吸引力的重要手段，正逐渐成为小程序开发中的关键元素。
动画不仅能够让小程序的界面更加生动有趣，还可以有效引导用户的注意力，提升整体使用体验。无论是页面切换时的流畅过渡，还是按钮点击时的细腻反馈，巧妙运用动画都能为用户留下一种愉悦的感觉。
🚀一、在小程序中使用动画🔎1.使用 WXSS 实现动画效果在微信小程序中，组件的样式可能会随着时间变化而动态调整，例如尺寸、形状、背景色或旋转角度等。当样式发生变化时，直接替换 WXSS 样式表，变化会立即生效，但这可能导致用户体验变得突兀。为了改善这种体验，可以使用渐变动画效果，使样式的变化过程更平滑。
🦋1.1 使用 transition 实现渐变动画通过使用 transition，可以让样式的变化过程变得平滑，产生渐变效果。下面是一个简单的例子。
☀️1.1.1 示例：使用 transition 实现渐变动画HTML 代码（animationDemo.wxml）：
代码语言：html复制
代码语言：css复制/* pages/animationDemo/animationDemo.wxss */
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #ffcccc;
width: 200px;
height: 200px;
transform: rotate(180deg);
}解释：
transition 属性用于定义渐变动画。此处设置了四个样式变化的渐变效果：width 2s：宽度变化用时2秒height 2s：高度变化用时2秒background-color 2s：背景色变化用时2秒transform 2s：旋转效果用时2秒:hover 伪类：当用户悬停在组件上时，会触发样式变化。此时，色块的宽高、背景色和旋转效果都会进行渐变。效果：
当用户悬停在色块上时，会看到色块逐渐变大、颜色渐变，并且旋转180度。🦋1.2 使用 @keyframes 定义关键帧动画使用 @keyframes 可以创建更复杂的动画效果，支持多个动画阶段，不同于 transition 只定义开始与结束的状态。
☀️1.2.1 示例：使用 @keyframes 实现关键帧动画WXSS 代码（animationDemo.wxss）：
代码语言：css复制/* pages/animationDemo/animationDemo.wxss */
@keyframes move {
from {
margin-top: 0px;
margin-left: 0px;
width: 100px;
}
50% {
margin-top: 0px;
margin-left: 200px;
width: 50px;
}
75% {
margin-top: 200px;
margin-left: 200px;
width: 50px;
}
to {
margin-left: 0px;
width: 100px;
}
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
animation-duration: 3s;
animation-name: move;
animation-iteration-count: infinite;
}解释：
@keyframes move 定义了一个名为 move 的关键帧动画：from：动画开始时的样式。50%：动画进行到一半时的样式。75%：动画进行到四分之三时的样式。to：动画结束时的样式。animation-duration: 3s：动画持续时间为3秒。animation-name: move：指定使用的关键帧动画名称。animation-iteration-count: infinite：动画将无限循环播放。效果：
页面上的色块将按照设置的关键帧路径进行循环动画。🦋1.3 动画控制属性在 WXSS 中，可以使用以下属性来控制动画的行为：
属性名
描述
animation-name
设置要使用的关键帧动画名称
animation-delay
设置动画延迟多久开始播放
animation-direction
设置动画播放方向，取值：normal（正向播放），alternate（正反循环），reverse（逆向播放），alternate-reverse（逆向首次播放，之后交替播放）
animation-iteration-count
设置动画播放次数，infinite 表示无限循环
animation-play-state
设置动画播放状态，取值：running（播放中），paused（暂停）
animation-timing-function
设置动画的时序函数（例如：ease-in、linear 等）
animation-fill-mode
设置动画结束后的状态，取值：forwards（保持结束状态），backwards（保持开始状态），both（两者都应用）
🦋1.4 事件监听动画过程你可以为动画添加事件监听器，以便在动画的不同阶段执行相应的操作。下面是一些常用的动画事件：
bindtransitionend：当 transition 动画结束时触发。bindanimationstart：当关键帧动画开始时触发。bindanimationiteration：当关键帧动画的某一循环结束时触发。bindanimationend：当关键帧动画结束时触发。☀️1.4.2 示例：绑定动画事件HTML 代码（animationDemo.wxml）：
代码语言：html复制
bindanimationstart="animationstart" bindanimationiteration="animationiteration" bindanimationend="animationend">
代码语言：javascript代码运行次数：0运行复制// pages/animationDemo/animationDemo.js
Page({
transitionend: function () {
console.log("transition 渐变动画执行结束");
},
animationstart: function () {
console.log("关键帧动画开始");
},
animationiteration: function () {
console.log("关键帧阶段完成");
},
animationend: function () {
console.log("关键帧动画结束");
}
});效果：
在动画的不同阶段，控制台会输出相应的日志，帮助你调试和控制动画过程。🔎2.使用小程序框架接口创建动画效果在微信小程序中，除了通过 WXSS 来定义样式和动画外，还可以利用小程序提供的动画 API 来创建动态效果。使用这些 API，可以更加灵活地控制动画，并且可以不依赖于 WXSS 文件来实现关键帧动画。
🦋2.1 使用 animate 方法创建动画通过小程序的 animate 方法，可以在页面元素上应用动画效果。这个方法接受四个参数：
元素选择器：选择需要执行动画的元素。动画关键帧列表：定义动画的关键帧，即动画过程中各个时间点的样式。动画时长：设置动画执行的时间（以毫秒为单位）。回调函数：动画结束后执行的回调函数，可以在其中处理动画结束后的清理工作。☀️2.1.1 示例：点击事件触发动画JavaScript 代码（animationDemo.js）：
代码语言：javascript代码运行次数：0运行复制// pages/animationDemo/animationDemo.js
Page({
tapEvent: function() {
this.animate(".box", [
{ width: '100px', height: '100px', backgroundColor: '#0000FF' },
{ backgroundColor: '#ffcccc', width: '200px', height: '200px', transform: 'rotate(180deg)' }
], 500, () => {
this.clearAnimation(".box");
});
}
});解释：
.box：选择器，指定要应用动画的元素。动画关键帧：通过数组定义关键帧，其中每个对象包含了要应用的样式。第一个关键帧：定义初始状态，width: '100px', height: '100px', backgroundColor: '#0000FF'。第二个关键帧：定义动画结束时的样式，backgroundColor: '#ffcccc', width: '200px', height: '200px', transform: 'rotate(180deg)'。500：动画时长为500毫秒。回调函数：在动画完成后，调用 clearAnimation 方法来清除动画效果。运行效果：
点击页面中的色块时，色块将会执行一个渐变动画，宽高变化、背景色变化，并旋转180度。
🦋2.2 animate 方法的关键帧属性animate 方法中的关键帧数组对象支持许多不同的属性，类似于 CSS 样式，下面是一些常用的动画属性：
属性名
类型
描述
offset
数字（0~1）
设置关键帧的位置，范围从 0 到 1
backgroundColor
字符串
设置背景颜色
width
字符串
设置宽度
height
字符串
设置高度
top
字符串
设置顶部位置
left
字符串
设置左边位置
opacity
字符串
设置不透明度
transform
字符串
设置变换样式，如 rotate, scale 等
translate3d
字符串
设置 3D 平移
rotate
字符串
设置旋转角度
scale
字符串
设置缩放比例
skewX/skewY
字符串
设置倾斜角度
matrix
字符串
设置变换矩阵
这些属性可以组合使用，创建复杂的动画效果。
🦋2.3 clearAnimation 方法clearAnimation 方法用于清除已应用的动画效果，可以在动画执行完毕后调用。它接受三个参数：
选择器：指定要清除动画的元素。清除选项（可选）：一个对象，用于指定要清除的特定动画属性。如果不传递该参数，则会清除所有动画属性。回调函数（可选）：清除动画后的回调函数。☀️2.3.1 示例：清除动画效果代码语言：javascript代码运行次数：0运行复制this.clearAnimation(".box", {}, () => {
console.log("动画已清除");
});此时，clearAnimation 会清除 .box 元素上的所有动画效果，且在清除完毕后执行回调函数。
🔎3.交互式动画大多数动画效果是独立于用户交互的，即动画的执行不会受到用户操作的直接影响。然而，在一些场景中，基于用户交互的动画非常重要。例如，可以根据用户对页面的滚动行为来控制动画的执行。
在小程序开发框架中，animate 方法提供了一个功能，可以在用户滚动时驱动动画的执行。通过将 animate 方法的第四个参数配置为一个对象，你可以实现这种基于滚动交互的动画效果。
🦋3.1 实现滚动驱动的动画为了实现滚动驱动的动画，需要使用 scroll-view 组件并为其设置一个固定的高度。在用户滚动 scroll-view 时，页面元素的动画效果会根据滚动的进度变化。
☀️3.1.1 示例：实现滚动驱动的动画animationDemo.wxml 文件：
代码语言：xml复制
解释：
scroll-view 组件用于创建一个可以滚动的区域，必须为其设置固定的高度（例如 300px）。页面中添加了一些占位数据，模拟内容的滚动。animationDemo.wxss 文件：
代码语言：css复制/* pages/animationDemo/animationDemo.wxss */
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
}
.scroll {
height: 300px;
}解释：
.box 是动画的目标元素，初始状态为宽高 100px，背景色为蓝色。.scroll 为 scroll-view 组件，设置了一个固定的高度 300px。🦋3.2 在 onReady 生命周期方法中添加动画在页面的 onReady 生命周期方法中，通过 animate 方法为 .box 元素设置基于滚动驱动的动画。
animationDemo.js 文件：
代码语言：javascript代码运行次数：0运行复制// pages/animationDemo/animationDemo.js
Page({
onReady: function() {
this.animate(".box", [
{ width: '100px', height: '100px', backgroundColor: '#0000FF' },
{ backgroundColor: '#FFCCCC', width: '200px', height: '200px', transform: 'rotate(180deg)' }
], 500, {
scrollSource: '.scroll', // 绑定交互动画的 scroll-view 组件
timeRange: 1000, // 起始和结束滚动范围映射的时间长度
startScrollOffset: 0, // 滚动偏移量的起点
endScrollOffset: 400, // 滚动偏移量的终点
orientation: 'vertical' // 设置滚动方向，'vertical' 为竖直方向
});
}
});解释：
scrollSource: '.scroll'：指定滚动视图 (scroll-view) 作为动画触发的源。orientation: 'vertical'：设置滚动方向为垂直（竖直方向）。如果要使用水平滚动，可以设置为 'horizontal'。startScrollOffset: 0：滚动的起始偏移量，单位为像素，这里设置为 0。endScrollOffset: 400：滚动的结束偏移量，单位为像素，这里设置为 400。timeRange: 1000：设置滚动偏移量的映射时间长度，单位为毫秒，即动画执行的时间。🦋3.3 滚动驱动的动画效果当用户滚动 scroll-view 时，.box 元素的宽度、背景色、旋转角度等会根据滚动进度逐渐发生变化。例如，在滚动开始时，.box 的宽度为 100px，背景色为蓝色，随着滚动的进行，.box 的宽度会变为 200px，背景色变为粉红色，且旋转 180 度。
在设置滚动驱动的动画时，可以配置以下属性：
属性名
类型
描述
scrollSource
字符串
选择器，指定要绑定交互动画的 scroll-view 组件
orientation
字符串
设置滚动的方向，可选值为：horizontal（水平方向）、vertical（竖直方向）
startScrollOffset
数值
设置滚动偏移量的起点，单位为像素
endScrollOffset
数值
设置滚动偏移量的终点，单位为像素
timeRange
数值
起始和结束滚动范围映射的时间长度，单位为毫秒