Moti 避免循环加速和减速

Question

尝试用 Moti 制作旋转器，但在减速方面遇到了一些问题（只是希望它永远旋转（我确实喜欢它开始时很慢，但不需要）。

import { Feather } from '@expo/vector-icons'
import { MotiText } from 'moti'
import React from 'react'
import type { TextStyle } from 'react-native'

import { Colors } from '~/constants/Theme'

type Props = {
  color?: TextStyle['color']
  size?: number
}

export function LoadingSpinner({ color = Colors['white'], size = 15 }: Props) {
  return (
    <MotiText
      from={{
        rotate: '0deg',
      }}
      animate={{
        rotate: '360deg',
      }}
      transition={{
        loop: true,
        repeatReverse: false,
        type: 'timing',
        duration: 5000,
      }}
    >
      <Feather
        name="loader"
        size={size}
        style={{
          paddingBottom: 5,
          color,
        }}
      />
    </MotiText>
  )
}

我猜这是 type: 'timing', 的问题，但似乎我只能做 timing 和 spring

Answer 1

您是否尝试过将 easing: Easing.linear 添加到 transition，其中 Easing 是从 react-native-reanimated 导入的？

Moti 避免循环加速和减速

Moti avoid speeding up and down for loop

animation

react-native

expo

moti