javascript - 我正在尝试为一个圆圈制作动画，该圆圈在最大宽度和高度保持 4 秒，然后再次缩小到原始大小，然后再次重复

Question

我正在尝试为一个 50 像素的圆制作动画，使其在 2 秒内扩大到 100 像素，然后在 100 像素处停留 2 秒，然后在 2 秒内开始缩小到 50 像素。然后无限期地重复这个。

目前我已经确定了扩展部分，但我不知道如何将其保持在最大宽度/高度 2 秒然后将其缩小。

import React, { FunctionComponent, useEffect } from 'react';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    withDelay,
    withRepeat,
    withSpring,
    withTiming,
} from 'react-native-reanimated';
import styled from 'styled-components/native';

const CircleAnimation: FunctionComponent<Props> = () => {
    const widthAndHeight = useSharedValue(50);
    const duration = 2;

    const foregroundCircleStyle = useAnimatedStyle(() => {
        return {
            width: widthAndHeight.value,
            height: widthAndHeight.value,
            borderRadius: widthAndHeight.value / 2,
        };
    });

    useEffect(() => {
        widthAndHeight.value = withDelay(
            2000,
            withRepeat(
                withTiming(100, {
                    duration: duration * 1000,
                }),
                -1,
                false
            )
        );
    }, [duration, widthAndHeight]);

    return <ForegroundCircle style={[foregroundCircleStyle]} />
};

const ForegroundCircle = styled(Animated.View)`
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: yellow;
`;

export default CircleAnimation;

Answer 1

我将您的效果重构为如下形式:

useEffect(() => {
    widthAndHeight.value = withRepeat(
      withSequence(
        withTiming(255, { duration: breathLength * 1000 }),
        withDelay(4000, withTiming(120, { duration: breathLength * 1000 }))
      ),
      -1
    );
  }, [breathLength, widthAndHeight]);

它似乎像您描述的那样工作。

解释代码:

首先，你想永远重复某个动画，所以你用 withRepeat 函数包装动画，将 -1 作为第二个参数传递。

您要重复的动画是两个动画的序列 (withSequence):

• 在 4 秒内展开圆圈 (withTiming)。
• 等待 4 秒(withDelay)，然后将圆缩小(withTiming)。

此外，与动画无关，但如果你想要一个完美的圆，你的border-radius应该至少是width(或height，因为它们具有相同的值)除以 2，所以至少 ~128px。