基于Taro实现的抛物线动效

基于Taro实现的抛物线动效

import React, {Component} from 'react'
import {View} from '@tarojs/components'
import './index.scss'

/**
 * 抛物线组件
 */
export default class Parabola extends Component {
  static defaultProps = {
    parabolaData: {
      type: Object,
      value: {}
    },
    completeFunction: () => {}
  }

  state = {
    xStyle: "",
    yStyle: ""
  }

  componentDidMount() {
    this.setInitTimerData()
  }

  componentWillUnmount() {
    this.clearTimerData()
    this.setInitTimerData()
  }

  init() {
    let {parabolaData} = this.props;
    let yStyle = `position:fixed;top:${parabolaData.originY ? Math.floor(parabolaData.originY) : 0}px;left:${parabolaData.originX ? Math.floor(parabolaData.originX) : 0}px;display:block;`;
    let yValue = parabolaData.originY > parabolaData.terminalY ? `all .4s cubic-bezier((0, 0.77, 0.56, 1.38);` : `all .4s cubic-bezier(0.43,-0.6, 1, 0.82);`;
    yStyle += `transition:${yValue}-webkit-transition:${yValue}-moz-transition:${yValue}-ms-transition:${yValue}-o-transition:${yValue}`
    this.setState({
      yStyle: yStyle
    });
    this.timerData.transitionTimer = setTimeout(() => {
      this.fall();
    }, 0);
  }

  fall() {
    let {parabolaData} = this.props;
    let {yStyle} = this.state;
    let xValue = `translateX(${Math.floor(parabolaData.terminalX - parabolaData.originX)}px);`;
    let yValue = `translateY(${Math.floor(parabolaData.terminalY - parabolaData.originY)}px);`;
    let xStyle = `transform:${xValue}-webkit-transform:${xValue}-moz-transform:${xValue}-ms-transform:${xValue}-o-transform:${xValue}`;
    yStyle += `transform:${yValue}-webkit-transform:${yValue}-moz-transform:${yValue}-ms-transform:${yValue}-o-transform:${yValue}`;
    this.setState({
      xStyle: xStyle,
      yStyle: yStyle
    }, () => {
      this.timerData.destroyedTimer = setTimeout(() => {
        this.props.completeFunction(parabolaData.id);
      }, 500);
    });
  }

  setInitTimerData() {
    this.timerData = {
      transitionTimer: null,
      destroyedTimer: null
    };
  }

  clearTimerData() {
    Object.keys(this.timerData).forEach((item) => {
      let i = this.timerData[item];
      this.timerData[item] && clearTimeout(i);
    });
  }

  render() {
    const {xStyle, yStyle} = this.state;
    return (
      <View className='view-y' style={yStyle}>
        <View className='view-x' style={xStyle} />
      </View>
    )
  }
}

$xTransition: all .4s linear;
$yTransition: all .4s cubic-bezier(.29, .04, .92, .29);
.view-x, .view-y {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.view-x {
  background: #8A37CF;
  transition: $xTransition;
  -webkit-transition: $xTransition;
  -moz-transition: $xTransition;
  -ms-transition: $xTransition;
  -o-transition: $xTransition;
}

.view-y {
  transition: $yTransition;
  -webkit-transition: $yTransition;
  -moz-transition: $yTransition;
  -ms-transition: $yTransition;
  -o-transition: $yTransition;
  position: fixed;
  display: none;
}