使用css3和tween.js二种方式实现照片翻转

照片翻转的二种方式

最近在学习使用动画效果，经常去鑫空间翻看大神写得博客，最近看到最新3月份出炉的博客–小tips: 在canvas上实现元素图片镜像翻转动画效果，我就想到自己也有需要展示照片的时候，只实现过一种鼠标mouseover时照片放大，鼠标mouseleave时照片复原的效果，实在是太简陋了！看到这个canvas图片水平镜像翻转动画实例页面后，很想在用css实现这个效果（后话是css实现太简单了）。

1.css展示的2种方式

我想到2种使用css实现照片旋转的方式，其一是hover，其二是点击事件绑定class。其核心代码是：

ul li >section{
    transition: 0.6s;
}
ul li:hover .back{
    transform: rotateY(180deg);
}
ul li .back2{
    transform: rotateY(180deg);
}

大家是不是觉得很low，寥寥几行代码，想哭的心都有了，原来css的实现方式就是这么简单。

2.页面代码

<template>
    <section>
        <h1>照片旋转演示组件</h1>
        <section id="container">
            <ul>
                <li>
                    <section class="back">
                        <img src="~assets/img/people/1.jpg" alt="" >
                    </section>
                    <p>CSS方式一：hover</p>
                </li>
                <li @click="isPositive = !isPositive">
                    <section :class="isPositive ? 'back2' : ''">
                        <img src="~assets/img/people/2.jpg" alt="" >
                    </section>
                    <p>CSS方式二：点击事件绑定class</p>
                </li>
                <li @click="onFlip">
                    <section>
                        <img src="~assets/img/people/3.jpg" alt="" id="img" >
                    </section>
                    <p>JS方式一：使用Tween.js动画算法加载不同旋转角度</p>
                </li>
            </ul>
            <select v-model="picParam.algorithm">
                <option v-for="item in tweenStr.algorithm" v-text="item"></option>
            </select>
            <select v-model="picParam.rapidity">
                <option v-for="item in tweenStr.rapidity" v-text="item"></option>
            </select>
        </section>
    </section>
</template>

3.使用Tween.js运动缓动算法实现照片翻转，更加灵活！

看到了大神张花废篇幅介绍的运动缓动算法Tween.js，就特别想在照片翻转中用到它！这个算法用于实现动画效果的，而且代码量特别少，使用灵活。
Tween.js使用示例如下：

// 使用Tween.js动画库实现图片翻转
 onFlip () {
     let self = this
     if (self.picParam.isMove) {
         return
     }
     self.picParam.isMove = true
     // 水平翻转动画
     let img = document.getElementById('img')
     Math.animation(-180 + self.picParam.deg, 0 + self.picParam.deg, 600, self.picParam.algorithm + '.' + self.picParam.rapidity, function (value, isEnding) {
         img.style.transform = 'rotateY('+value+'deg)'
         if (isEnding) {
             self.picParam.isMove = false
             self.picParam.isflip = !self.picParam.isflip
             self.picParam.deg = self.picParam.isflip ? 0 : 180
         }
     })
 }

实现效果如下：