本文整理汇总了TypeScript中react-native.Animated类的典型用法代码示例。如果您正苦于以下问题：TypeScript Animated类的具体用法？TypeScript Animated怎么用？TypeScript Animated使用的例子？那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。
在下文中一共展示了Animated类的6个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: switch
convertTransitionDefinition: (
{ raw, useNativeDriver },
def,
{ toValue }
) => {
if (isAction(def)) return def;
const animationProps = {
...def,
toValue,
useNativeDriver
};
switch (def.type) {
case 'spring':
return Animated.spring(
raw,
animationProps as Animated.SpringAnimationConfig
);
default:
return Animated.timing(
raw,
animationProps as Animated.TimingAnimationConfig
);
}
},示例2:
const linearTween: Transition = ({ value, toValue, useNativeDriver = true }) =>
Animated.timing(value, {
toValue,
duration: 300,
easing: v => v,
useNativeDriver
});示例3: warning
getProps: (poser, { draggable }, { onDragStart, onDragEnd }) => {
if (!draggable) return {};
warning(
false,
'draggable: true disables useNativeDriver for this component.'
);
const values = poser.get();
const dragX = draggable === true || draggable === 'x';
const dragY = draggable === true || draggable === 'y';
const panResponder = PanResponder.create({
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: Animated.event([
null,
{
dx: dragX ? values.x : null,
dy: dragY ? values.y : null
}
]),
onPanResponderGrant: (e, gestureState) => {
if (dragX) {
values.x.setOffset(values.x._value);
values.x.setValue(0);
}
if (dragY) {
values.y.setOffset(values.y._value);
values.y.setValue(0);
}
if (onDragStart) onDragStart(e, gestureState);
poser.set('dragging', { gestureState });
},
onPanResponderRelease: (e, gestureState) => {
if (onDragEnd) onDragEnd(e, gestureState);
if (dragX) values.x.flattenOffset();
if (dragY) values.y.flattenOffset();
poser.set('dragEnd', { gestureState });
}
});
return panResponder.panHandlers;
}示例4:
addActionDelay: (delay = 0, transition) =>
Animated.sequence([Animated.delay(delay), transition]),示例5:
createAnimatedComponent: (Component: React.Component) =>
Animated.createAnimatedComponent(Component),示例6: warning
getProps: (
poser,
{ draggable },
{ onDragStart, onDragEnd, flipMove, measureSelf },
setLayout
) => {
let props: { [key: string]: any } = {};
if (draggable) {
warning(
false,
'draggable: true disables useNativeDriver for this component.'
);
const values = poser.get();
const dragX = draggable === true || draggable === 'x';
const dragY = draggable === true || draggable === 'y';
const panResponder = PanResponder.create({
onMoveShouldSetPanResponderCapture: () => true,
onPanResponderMove: Animated.event([
null,
{
dx: dragX ? values.x : null,
dy: dragY ? values.y : null
}
]),
onPanResponderGrant: (e, gestureState) => {
if (dragX) {
values.x.setOffset(values.x._value);
values.x.setValue(0);
}
if (dragY) {
values.y.setOffset(values.y._value);
values.y.setValue(0);
}
if (onDragStart) onDragStart(e, gestureState);
poser.set('dragging', { gestureState });
},
onPanResponderRelease: (e, gestureState) => {
if (onDragEnd) onDragEnd(e, gestureState);
if (dragX) values.x.flattenOffset();
if (dragY) values.y.flattenOffset();
poser.set('dragEnd', { gestureState });
}
});
props = {
...props,
...panResponder.panHandlers
};
}
if (flipMove || measureSelf) {
props.onLayout = ({ nativeEvent }: LayoutChangeEvent) =>
setLayout(nativeEvent.layout);
}
return props;
}