常见经典动效实现总结（老虎机、打字机、纸牌翻转等等）
一、老虎机抽奖
效果图：
实现思路：
1、将老虎机图片放置好之后，在要滚动的区域等宽的按照需要划分积分区域，设置position：absolute，如下图，再将最重要显示的区域（即绿色区域）外的部分用overflow: hidden隐藏;
2、此时需要考虑的是让积分区域滚动起来，我用的方法是使积分区域离顶部距离不断变化，从而实现一个向下的滚动效果。
3、最重要的一步，就是要确定最后滚动停留的积分位置，由于积分是随机给的，所以这里需要用到css变量，动态地计算出最后积分距顶部距离，再结合第2步滚动起来即可实现积分滚动。
4、结合实际需要添加其他后续效果。
核心代码：（小程序为例）
设置变量： --point-mid-height为中间态，可不设置；主要的是--point-final-height的计算。
this.setData({
style: `--point-final-height: ${130 * (19 - randomScore)}rpx;
--point-mid-height: ${130 * (19 - randomScore) * 0.7}rpx;`
})//积分所在区域
.point-box {
display: flex;
flex-direction: column;
flex-direction: column-reverse;
width: 328rpx;
height: 131rpx;
background: rgba(255, 254, 238, 0);
position: absolute;
top: 0;
animation: bounce_box 1.5s linear 1s forwards;
}
@keyframes bounce_box {
0% {
top: 0rpx
}
50% {
top: var(--point-mid-height); //中间状态，可不设置
}
100% {
top: var(--point-final-height); //最终状态，积分高度
}
}附： css变量不会用的请移步css变量用法（原生js、小程序）_小程序css变量_吃鱼吐泡泡的博客-CSDN博客
二、打字机效果
效果图：
实现思路：
实现的方法有多种，有css、js实现等等。css使用animation和steps结合；js可使用setTimeOut、setInterval、requestAnimationFrame等等。
css实现：
Steps(
div {
font-size: 20px;
/* 初始宽度为0 */
width: 0;
height: 30px;
border-right: 1px solid darkgray;
animation: write 4s steps(14) forwards, blink 0.5s steps(1) infinite;
overflow: hidden;
}
@keyframes write {
0% {
width: 0;
}
100% {
width: 280px;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}demo: GitHub - 14130110048/typewriter-effect: 打字机效果
三、纸牌翻转效果
效果图：
实现思路：
1、在最外层容器元素加属性transform-style: preserve-3d，使整个元素在3d空间呈现。
注：
transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d。
transform-style属性的使用语法非常简单：
transform-style: flat | preserve-3d ；
其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
2、 设置两个卡片容器，一正一反，两个容器加属性backface-visibility: hidden;
注：
backface-visibility 指定当元素背面朝向观察者时是否可见。
3、正反面容器加翻转效果。
核心代码：
.medal-card {
width: 283rpx;
height: 376rpx;
position: relative;
transform-style: preserve-3d;
}
.card {
width: 283rpx;
height: 376rpx;
position: absolute;
backface-visibility: hidden;
}
.card.fornt {
background-image: url(https://xxx.png);
transform: rotateY(180deg);
animation: backface 1s ease-in-out 1s normal forwards;
}
.card.back {
background-image: url(https://xxx.png);
animation: backface1 1s ease-in-out 1s normal forwards;
}
@keyframes backface {
100% {
transform: rotateY(0);
}
}
@keyframes backface1 {
100% {
transform: rotateY(180deg);
}
}不断补充中。。。。