css实现拍照动画

1.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components';
import styles from './index.module.less'
var intervalTime = null;


export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            imgCoverBackground: `rgba(255, 255, 255, 0)`,
            imgCoverChange: false,
            isShowImgCover: false,
        }
    };

    action = () => {
        console.log(1)
        this.setState({
            isShowImgCover: true
        })
        let a = 0
        let imgCoverBackground;
        intervalTime = setInterval(() => {
            a = a + 0.1;
            imgCoverBackground = `rgba(255, 255, 255, ${a})`;
            this.setState({
                imgCoverBackground: imgCoverBackground,
            })
            if (a >= 1) {
                clearInterval(intervalTime);
                this.setState({
                    imgCoverBackground: `rgba(255, 255, 255, 1)`,
                    imgCoverChange: true,
                })
                this.setTimeout1();
            }
        }, 20)
    }
    setTimeout1 = () => {
        setTimeout(() => {
            this.setState({
                isShowImgCover: false,
            })
        }, 2000)

    }
    render() {
        const { imgCoverBackground, imgCoverChange, isShowImgCover} = this.state;
        return (
            <View className={styles.screenshot}>
                {isShowImgCover && <View className={!imgCoverChange ? styles.imgCover1 : styles.imgCover2} style={{background: imgCoverBackground}}></View>}
                <View className={styles.testBox}>
                    <Image src="https://www.duoguyu.com/dist/flip/flipImg-1.jpg" className={styles.img}/>
                </View>
                <View onClick={this.action}>开始</View>
            </View>
        )
    }
}

2.css

.screenshot {

  width: 100%;
  min-height: 100vh;
  display: inline-block;
  box-sizing: border-box;
  //padding: 0px 24px 50px 24px;
  background: orangered;
  background-size: 100% auto;
  .imgCover1 {
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0);
  }
  .imgCover2 {
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 1);
    -webkit-animation: signbtnmove 3s 1;
  }
  .testBox {
    width: 600px;
    height: 1000px;
    .img {
      width: 600px;
      height: 1000px;
    }
  }
}
@keyframes signbtnmove {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    left: 0;
    top: 0;
  }
  33% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    left: 0;
    top: 0;
  }
  100% {
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
    left: -200%;
    top: 100%;
  }
}