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

Question

我开发了一个底部标签导航器，并使用 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>
  );
}

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

Answer 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) 确保它总是从 0 开始你可以看到 LottieView 方法 here

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

How to play a Lottie animation only once in LottieView?

react-native

lottie

react-navigation-bottom-tab