如何在 LottieView 中只播放一次 Lottie 动画？答案

【问题标题】：How to play a Lottie animation only once in LottieView?如何在 LottieView 中只播放一次 Lottie 动画？
【发布时间】：2021-09-20 14:51:43
【问题描述】：

我开发了一个底部标签导航器并使用 Lottie 动画作为图标。我希望它们自动播放并且只在焦点对准时播放一次（例如 Binance 应用程序）。我尝试过使用loop={false}，但这完全阻止了它的动画效果。代码如下：

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LottieView from 'lottie-react-native';

import Home from './Home';
import Create from './Create';
import Messages from './Messages';
import Forum from './Forum';
import Profile from './Profile';

const Tab = createBottomTabNavigator();

export default function Tabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let filePath;

          switch (route.name) {
            case 'Home':
              filePath = require('../tabanimations/hometab.json');
              break;
            case 'Messages':
              filePath = require('../tabanimations/messagestab.json');
              break;
            case 'Create':
              filePath = require('../tabanimations/hometab.json');
              break;
            case 'Forum':
              filePath = require('../tabanimations/forumtab.json');
            case 'Profile':
              filePath = require('../tabanimations/profiletab.json');

              break;
          }

          return <LottieView source={filePath} autoPlay={focused} />;
        },
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Messages" component={Messages} />
      <Tab.Screen name="Create" component={Create} />
      <Tab.Screen name="Forum" component={Forum} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
}

如何在焦点上只播放一次动画？

【问题讨论】：

标签： react-native lottie react-navigation-bottom-tab

【解决方案1】：

使用loop={false} 和autoPlay={false} 然后使用play() 在焦点上运行
您的代码可能与此类似

tabBarIcon: ({ focused, color, size }) => {
    return <CustomTab focused={focused} color={color} size={size} route={route}/>
}


const CustomTab = ({ focused, color, size, route}) => {

    const ref = React.useRef();
    let filePath;

    //on focus change the anim will play
    React.useEffect(() => {
        if(focused && ref.current){
            ref.current?.play();
        }
    }, [focused, ref.current]);

    switch (route.name) {
        case 'Home':
            filePath = require('../tabanimations/hometab.json');
            break;
        case 'Messages':
            filePath = require('../tabanimations/messagestab.json');
            break;
        case 'Create':
            filePath = require('../tabanimations/hometab.json');
            break;
        case 'Forum':
            filePath = require('../tabanimations/forumtab.json');
        case 'Profile':
            filePath = require('../tabanimations/profiletab.json');

            break;
    }

    return (
        <LottieView 
            ref={ref}
            loop={false}
            source={filePath} 
            autoPlay={false} />
    );
};

你也可以像ref.current?.play(0, 1)这样使用play来确保它总是从0开始可以看LottieView方法here

【讨论】：