如何制作类似 CSS 的按钮动画 React答案

【问题标题】：How to make a CSS-like button animation React如何制作类似 CSS 的按钮动画 React
【发布时间】：2020-12-29 23:13:32
【问题描述】：

单击按钮后，我希望在大约半秒的时间范围内出现和消失的小火花。

我曾考虑使用 gif，但它需要大量的手工艺术努力才能获得令人满意的效果。

有没有办法使用动画模块或任何第三方库来制作精确效果的动画？

Animated 模块的限制似乎是简单的平移和不透明动画，我有一个写在下面的例子：

    <Animated.View
      style={{
        position: 'absolute',
        zIndex: 900,
        bottom: constants.NAVBARHEIGHT / 4,
        height: 90,
        opacity: fade,
        width: Dimensions.get('window').width,
      }}>

但我不知道如何获得更复杂的动画，如下所示：https://codepen.io/mccombsc/pen/ZEzxWPy

【问题讨论】：

在某些方面需要某人（非常适度的）艺术努力。使用开源图标或剪贴画库（如 nounproject）自己完成。
感谢您的帮助。 nounproject 有动画吗？我只能看到静态图片。
它没有，我建议使用这些图标来创建您正在描述的动画。考虑使用 css 动画来做到这一点。
哦，我明白了。我去做。谢谢！
所以我找到了似乎可以满足我要求的乐天和关键帧。我不确定它们是如何工作的。我必须先在后效中制作动画吗？

标签： css reactjs react-native

【解决方案1】：

您可以使用抽签动画工作示例：https://snack.expo.io/@msbot01/forlorn-raspberries

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import LottieView from 'lottie-react-native';




export default class NoNetwork extends Component {

  handleClick(){
    console.log('>>>>>>>>>>>>>>>>>>>>>>>>.')
    this.animation.play();
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor:'white', justifyContent:'center', alignItems:'center' }}>
        
        <LottieView 
        source={require('./circle2.json')} 
        ref={animation => {
          this.animation = animation;
        }} 
        autoPlay={false}  
        loop={false}/>
      <TouchableOpacity style={{height:50, width:150, backgroundColor:'#8fd8ff', borderRadius:10, justifyContent:'center', alignItems:'center'}} onPress={()=>{this.handleClick()}}><Text style={{color:'#31789e'}}>Click me</Text></TouchableOpacity>
      </View>
    ); 
  } 
}

const styles = StyleSheet.create({});

【讨论】：