0
我想創建一個我無法弄清楚的動畫。假設我在視圖的中心有一個正方形(100x100)。我希望將任何長度的文本從「後面」滑動到視圖的右側。顯然,我希望文本不可見,但只有動畫。React-Native。創建滑動動畫
如果有人能幫助我,我會很高興。
乾杯
我想創建一個我無法弄清楚的動畫。假設我在視圖的中心有一個正方形(100x100)。我希望將任何長度的文本從「後面」滑動到視圖的右側。顯然,我希望文本不可見,但只有動畫。React-Native。創建滑動動畫
如果有人能幫助我,我會很高興。
乾杯
基本上你需要設置你的動畫X值 - (你方的寬度),所以在這種情況下,-100,和動感的風格設置爲Animated.View。技巧只是調用Animation.spring處理的動畫(但您可以使用Animation.timing或Animated API提供的任何方法)並設置transform:[{translateX:myAnimatedValue}]。
這和CSS3轉換沒有什麼不同。你有一個畫布外的元素,並逐漸讓用戶看到它。 我希望這可能會有用。
import React, { Component } from 'react';
import {
View,
Animated
} from 'react-native';
// const styles = ...
export default class SlidingExample extends Component {
state = {
visible: false,
x: new Animated.Value(-100),
};
slide =() => {
Animated.spring(this.state.x, {
toValue: 0,
}).start();
this.setState({
visible: true,
});
};
render() {
// in practice you wanna toggle this.slide() after some props validation, I hope
this.slide();
return (
<View>
<Animated.View
style={[styles.slideView, {
transform: [
{
translateX: this.state.x
}
]
}]}
>
{/* your content, such as this.props.children */}
</Animated.View>
</View>;
);
}
}
什麼是styles.SlideView?動畫的樣式或滑動元素的樣式? – misi06
滑動元素的樣式,如backgroundColor或類似的東西。 –
我是React Native的新手,我很努力。我想這樣使用它,但我得到錯誤「的說法0 UIManager發出的(NSNumber的)必須不爲空:渲染(){ this.slide(); 回報( 測試 ); } –
misi06