CSS(四) 图片切片动画

切片动画是将一张图切成若干部分，由散而聚
这里的切图是假切图，图片本身大小不变，切多少部位就需要多少张图片
步骤:
1 创建需要的切片

let image = require("../image/test.png").default
        let scale = 200
        let columncount = 1200/scale
        let rowcount = 600/scale
        let columnlist = []
        let rowlist = []
        columnlist = this.getShapeList(columncount)
        rowlist = this.getShapeList(rowcount)
        let label = 0
        let imagelist = rowlist.map((i,index)=>{
            if(i<rowlist.length){
                return columnlist.map((j,index)=>{
                    if(j<columnlist.length){
                        let shape = (j*scale).toString() + "px " +((i+1)*scale).toString() + "px,"+ ((j+1)*scale).toString() + "px " +(i*scale).toString() + "px,"+ ((j+1)*scale).toString() + "px "+((i+1)*scale).toString() + "px"
                        shape = "polygon("+shape+")"
                        let shapeleft = (j*scale).toString() + "px " +(i*scale).toString() + "px,"+ (j*scale).toString() + "px "+((i+1)*scale).toString() + "px,"+ ((j+1)*scale).toString() + "px "+(i*scale).toString() + "px"
                        shapeleft = "polygon("+shapeleft+")"
                        label ++

2 遍历数组，对每张图片创建动画规则

let imagelist = document.getElementsByTagName('img')
        for(var i=0;i<imagelist.length;i++){
            // js创建@keyframes，ball从定位在(10,10)的位置运动到(100,100) 的位置
            const runkeyframes =`@keyframes imagemove`+i.toString()+`{
                0%{ transform: translate(`+parseInt((500+i*20)*Math.random()).toString()+`px,`+parseInt((500+i*20)*Math.random()).toString()+`px) rotateX(`+parseInt((500+i*20)*Math.random()).toString()+`deg) rotateY(`+parseInt((500+i*20)*Math.random())+`deg) rotateZ(`+parseInt((500+i*20)*Math.random()).toString()+`deg);}
                100%{ transform: translate(0px,0px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
            }`
            // 创建style标签
            const style = document.createElement('style');
            // 设置style属性
            style.type = 'text/css';
            // 将 keyframes样式写入style内
            style.innerHTML = runkeyframes;
            // 将style样式存放到head标签
            document.getElementsByTagName('head')[0].appendChild(style);

3 每张图片绑定对应的动画规则

imagelist[i].style.animation = "imagemove"+i.toString()+" 5s"
            imagelist[i].style.animationIterationCount = "infinite"

完整代码

import React from 'react'
import styles from '../css/qiepian.scss'

// 第一步生成切片数组
// 第二步为每个切片创建动画规则
// 第三步将动画规则绑定到每个切片中
export default class Qiepian extends React.Component{

    getShapeList(column){
        let columnlist = []
        let i = 0
        while(i<column){
            columnlist.push(i)
            i++
        }
        return columnlist
    }

    componentDidMount(){
        let imagelist = document.getElementsByTagName('img')
        for(var i=0;i<imagelist.length;i++){
            // js创建@keyframes，ball从定位在(10,10)的位置运动到(100,100) 的位置
            const runkeyframes =`@keyframes imagemove`+i.toString()+`{
                0%{ transform: translate(`+parseInt((500+i*20)*Math.random()).toString()+`px,`+parseInt((500+i*20)*Math.random()).toString()+`px) rotateX(`+parseInt((500+i*20)*Math.random()).toString()+`deg) rotateY(`+parseInt((500+i*20)*Math.random())+`deg) rotateZ(`+parseInt((500+i*20)*Math.random()).toString()+`deg);}
                100%{ transform: translate(0px,0px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
            }`
            // 创建style标签
            const style = document.createElement('style');
            // 设置style属性
            style.type = 'text/css';
            // 将 keyframes样式写入style内
            style.innerHTML = runkeyframes;
            // 将style样式存放到head标签
            document.getElementsByTagName('head')[0].appendChild(style);
            imagelist[i].style.animation = "imagemove"+i.toString()+" 5s"
            imagelist[i].style.animationIterationCount = "infinite"
        }
    }

    render(){
        let image = require("../image/test.png").default
        let scale = 200
        let columncount = 1200/scale
        let rowcount = 600/scale
        let columnlist = []
        let rowlist = []
        columnlist = this.getShapeList(columncount)
        rowlist = this.getShapeList(rowcount)
        let label = 0
        let imagelist = rowlist.map((i,index)=>{
            if(i<rowlist.length){
                return columnlist.map((j,index)=>{
                    if(j<columnlist.length){
                        let shape = (j*scale).toString() + "px " +((i+1)*scale).toString() + "px,"+ ((j+1)*scale).toString() + "px " +(i*scale).toString() + "px,"+ ((j+1)*scale).toString() + "px "+((i+1)*scale).toString() + "px"
                        shape = "polygon("+shape+")"
                        let shapeleft = (j*scale).toString() + "px " +(i*scale).toString() + "px,"+ (j*scale).toString() + "px "+((i+1)*scale).toString() + "px,"+ ((j+1)*scale).toString() + "px "+(i*scale).toString() + "px"
                        shapeleft = "polygon("+shapeleft+")"
                        label ++

                        return <div key={label}>
                            <img key={label} className={styles.image} style={{clipPath:shapeleft}} src={image} />
                            <img key={label+100} className={styles.image} style={{clipPath:shape}} src={image} />
                        </div>
                    }
                })
            }
            
        })
        return <div className={styles.main}>
            {imagelist}
        </div>
    }

}