新requestAnimationFrame和Animation一起使用，触发频率异常高

[linjinze999]

期望结果

requestAnimationFrame平均16ms(60fps)或8ms(120fps)触发一次

实际结果

requestAnimationFrame一毫秒就触发一次

重现链接

No response

重现步骤

替换view示例代码：https://github.com/Tencent/Hippy/blob/main/driver/js/examples/hippy-react-demo/src/components/View/index.jsx

import React, {useEffect, useRef} from 'react';
import {
  ScrollView,
  Text,
  View,
  StyleSheet,
  Animation,
} from '@hippy/react';

import imageUrl from './defaultSource.jpg';

const styles = StyleSheet.create({
  itemTitle: {
    alignItems: 'flex-start',
    justifyContent: 'center',
    height: 40,
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: '#e0e0e0',
    borderRadius: 2,
    backgroundColor: '#fafafa',
    padding: 10,
    marginTop: 10,
  },
  rectangle: {
    width: 160,
    height: 80,
    marginVertical: 10,
  },
  bigRectangle: {
    width: 200,
    height: 100,
    borderColor: '#eee',
    borderWidth: 1,
    borderStyle: 'solid',
    padding: 10,
    marginVertical: 10,
  },
  smallRectangle: {
    width: 40,
    height: 40,
    borderRadius: 10,
  },
});

export default function ViewExpo() {
  // [开始]requestAnimationFrame频率验证
  const animationStyle = useRef(new Animation({
    mode: 'timing',
    delay: 0,
    startValue: 100,
    toValue: 100,
    repeatCount: -1,
    duration: 1000,
  }))
  useEffect(() => {
    animationStyle.current.start()
    function animation(){
      console.log(Date.now())
      requestAnimationFrame(animation)
    }
    requestAnimationFrame(animation)
  }, [])
  // [结束]requestAnimationFrame频率验证

  const renderTitle = title => (
    <View style={styles.itemTitle}>
      <Text>{title}</Text>
    </View>
  );
  return (
    <ScrollView style={{ paddingHorizontal: 10 }}>
      {renderTitle('backgroundColor')}
      <View style={[styles.rectangle, { backgroundColor: '#4c9afa', width: animationStyle.current }]} />
      {renderTitle('backgroundImage')}
      <View style={[styles.rectangle, {
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
        backgroundImage: imageUrl,
      }]}
      accessible={true}
      accessibilityLabel={'背景图'}
      accessibilityRole={'image'}
      accessibilityState={{
        disabled: false,
        selected: true,
        checked: false,
        expanded: false,
        busy: true,
      }}
      accessibilityValue={{
        min: 1,
        max: 10,
        now: 5,
        text: 'middle',
      }}
    ><Text style={{ color: 'white' }}>背景图</Text></View>
      {renderTitle('backgroundImage linear-gradient')}
      <View style={[styles.rectangle, {
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 20,
        borderWidth: 2,
        borderStyle: 'solid',
        borderColor: 'black',
        borderRadius: 2,
        backgroundImage: 'linear-gradient(30deg, blue 10%, yellow 40%, red 50%);',
      }]} ><Text style={{ color: 'white' }}>渐变色</Text></View>
      {renderTitle('border props')}
      <View style={[styles.rectangle, { borderColor: '#242424', borderRadius: 4, borderWidth: 1, borderStyle: 'solid' }]} />
      {renderTitle('flex props')}
      <View style={[styles.bigRectangle, {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      }]}
      >
        <View style={[styles.smallRectangle, { backgroundColor: 'yellow' }]} />
        <View style={[styles.smallRectangle, { backgroundColor: 'blue' }]} />
        <View style={[styles.smallRectangle, { backgroundColor: 'green' }]} />
      </View>
    </ScrollView>
  );
}

重现环境

hippy3.3

补充说明

[etkmao]

vsyn通知有累积bug。

android有问题: #4427
ios没问题；
ohos有问题（因为用了和android一样的数据结构）：#4428

[etkmao]

以及：#4429