React native color a letter partially

Question

I'm making a React Native Karaoke app and I need to do an animation in which a letter is colored from left to right.

Is it possible to apply color to, say, half of a letter?

Answer 1

除了我的评论，以下是这种样式的完成方式。您只需使用javascript设置宽度动画，而不是悬停。

＆＃13;

＆＃13;

p{
color: black;
position: relative;
display: inline-block;
margin: 0;
font-size: 50px;
}
p:before{
content: attr(data-c);
position: absolute;
width: 0;
overflow:hidden;
top: 0;
left: 0;
color:red;
transition: width 1s;
}
p:hover:before{
width: 100%;
}

＆＃13;

<p data-c="Hello">Hello</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我试过这个你可以进一步应用更多的动画：

import React, { Component } from 'react';
import {
  Text,
  View,
  Animated
} from 'react-native';

export default class AnimatedText extends Component{

  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
  }
  componentDidMount() {
    Animated.timing(this.animatedValue, {
      toValue: 200,
      duration: 2500
    }).start();
  }

  render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 200],
      outputRange: ['rgb(255,255,255)', 'rgb(255, 0, 0)'],
      extrapolate: "clamp"
    })
    const animatedStyle = {
      color: interpolateColor,
    }
    return (
      <View style={{flex: 1,justifyContent: 'center',alignItems: 'center',padding:10,backgroundColor:'black'}}>
        <Animated.Text style={animatedStyle}>
        May be one day so don't turn on the lights I'll give you what you like Give you what you like
        </Animated.Text>
      </View>
    );
  }
}

Answer 3

如果您设置高度限制，则您在Expo中的解决方案将起作用：https://snack.expo.io/Bko7oYvr7