常见经典动效实现总结（老虎机、打字机、纸牌翻转等等）

一、老虎机🎰抽奖

效果图：

实现思路： 

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(<number_of_steps>，<direction>): steps接收两个参数,第一个参数指定动画分割的段数；第二个参数可选，接受start和 end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。      

            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、正反面容器加翻转效果。

核心代码：

<view class="medal-card">
      <view class="card fornt bg"></view>
      <view class="card back bg"></view>
</view>

.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);
    }
}

四、水波纹效果

代码：

    <view 
        class="correction-camer bg"
    >
        <view class="camer-icon bg"></view>
        <view class="camer-playing circle1"></view>
        <view class="camer-playing circle2"></view>
    </view>

.correction-camer {
    height: 380rpx;
    width: 380rpx;
    border-radius: 50%;
    margin: 70rpx auto;
    position: relative;
    background-color: #ffffff;
}

.camer-icon {
    height: 380rpx;
    width: 380rpx;
    border-radius: 50%;
    background-color: #ffffff;
    background-image: url(https://i.gsxcdn.com/2245655084_l3oea5yj.png);
    background-size: 170rpx 140rpx;
    background-position: 105rpx 98rpx;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0rpx 0rpx 10rpx 10rpx rgba(75,180,254,0.4);
}

.camer-playing {
    width: 500rpx;
    height: 500rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250rpx;
    margin-top: -250rpx;
    background-color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50% 50%;
    z-index: 9;
}

.circle1 {
    animation: ripple1 1.5s ease-out infinite;
}

.circle2 {
    animation: ripple2 1.5s ease-out infinite;
}

@keyframes ripple1 {
    0%,
    10% {
        opacity: 0;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes ripple2 {
    0%,
    25% {
        opacity: 0;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

不断补充中。。。。