react-native-animations by pluginagentmarketplace/custom-plugin-react-native
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-react-native --skill react-native-animations学习使用 Reanimated 3、Gesture Handler 和布局动画实现高性能动画。
完成本技能后,你将能够:
npm install react-native-reanimated react-native-gesture-handler
# babel.config.js
module.exports = {
plugins: ['react-native-reanimated/plugin'],
};
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
} from 'react-native-reanimated';
function AnimatedBox() {
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: scale.value }],
}));
const handlePress = () => {
scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
};
return (
<Pressable onPress={handlePress}>
<Animated.View style={[styles.box, animatedStyle]} />
</Pressable>
);
}
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
function DraggableBox() {
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const pan = Gesture.Pan()
.onUpdate((e) => {
translateX.value = e.translationX;
translateY.value = e.translationY;
})
.onEnd(() => {
translateX.value = withSpring(0);
translateY.value = withSpring(0);
});
const style = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value },
],
}));
return (
<GestureDetector gesture={pan}>
<Animated.View style={[styles.box, style]} />
</GestureDetector>
);
}
import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
function AnimatedList({ items }) {
return (
<Animated.View layout={Layout.springify()}>
{items.map((item) => (
<Animated.View
key={item.id}
entering={FadeIn}
exiting={FadeOut}
layout={Layout.springify()}
>
<Text>{item.title}</Text>
</Animated.View>
))}
</Animated.View>
);
}
| 函数 | 用例 |
|---|---|
| withTiming | 线性,可控时长 |
| withSpring | 自然的,基于物理 |
| withDecay | 基于动量(抛掷) |
| withSequence | 按顺序执行多个动画 |
| withRepeat | 循环动画 |
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
interpolate,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
function SwipeCard() {
const translateX = useSharedValue(0);
const gesture = Gesture.Pan()
.onUpdate((e) => { translateX.value = e.translationX; })
.onEnd(() => { translateX.value = withSpring(0); });
const style = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ rotate: `${interpolate(translateX.value, [-200, 200], [-15, 15])}deg` },
],
}));
return (
<GestureDetector gesture={gesture}>
<Animated.View style={[styles.card, style]} />
</GestureDetector>
);
}
| 错误 | 原因 | 解决方案 |
|---|---|---|
| "Attempted to call from worklet" | 缺少 runOnJS | 用 runOnJS() 包装 |
| 动画未运行 | 缺少 'worklet' 指令 | 添加 'worklet' 指令 |
| 手势不工作 | 缺少根视图 | 添加 GestureHandlerRootView |
Skill("react-native-animations")
绑定代理 : 05-react-native-animation
每周安装量
367
代码仓库
GitHub 星标数
5
首次出现
2026年1月21日
安全审计
安装于
opencode337
gemini-cli330
codex326
github-copilot317
cursor288
amp242
Learn high-performance animations using Reanimated 3, Gesture Handler, and layout animations.
After completing this skill, you will be able to:
npm install react-native-reanimated react-native-gesture-handler
# babel.config.js
module.exports = {
plugins: ['react-native-reanimated/plugin'],
};
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
} from 'react-native-reanimated';
function AnimatedBox() {
const scale = useSharedValue(1);
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ scale: scale.value }],
}));
const handlePress = () => {
scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
};
return (
<Pressable onPress={handlePress}>
<Animated.View style={[styles.box, animatedStyle]} />
</Pressable>
);
}
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
function DraggableBox() {
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const pan = Gesture.Pan()
.onUpdate((e) => {
translateX.value = e.translationX;
translateY.value = e.translationY;
})
.onEnd(() => {
translateX.value = withSpring(0);
translateY.value = withSpring(0);
});
const style = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value },
],
}));
return (
<GestureDetector gesture={pan}>
<Animated.View style={[styles.box, style]} />
</GestureDetector>
);
}
import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated';
function AnimatedList({ items }) {
return (
<Animated.View layout={Layout.springify()}>
{items.map((item) => (
<Animated.View
key={item.id}
entering={FadeIn}
exiting={FadeOut}
layout={Layout.springify()}
>
<Text>{item.title}</Text>
</Animated.View>
))}
</Animated.View>
);
}
| Function | Use Case |
|---|---|
| withTiming | Linear, controlled duration |
| withSpring | Natural, physics-based |
| withDecay | Momentum-based (fling) |
| withSequence | Multiple animations in order |
| withRepeat | Looping animations |
import Animated, {
useSharedValue,
useAnimatedStyle,
withSpring,
interpolate,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
function SwipeCard() {
const translateX = useSharedValue(0);
const gesture = Gesture.Pan()
.onUpdate((e) => { translateX.value = e.translationX; })
.onEnd(() => { translateX.value = withSpring(0); });
const style = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ rotate: `${interpolate(translateX.value, [-200, 200], [-15, 15])}deg` },
],
}));
return (
<GestureDetector gesture={gesture}>
<Animated.View style={[styles.card, style]} />
</GestureDetector>
);
}
| Error | Cause | Solution |
|---|---|---|
| "Attempted to call from worklet" | Missing runOnJS | Wrap with runOnJS() |
| Animation not running | Missing 'worklet' | Add 'worklet' directive |
| Gesture not working | Missing root view | Add GestureHandlerRootView |
Skill("react-native-animations")
Bonded Agent : 05-react-native-animation
Weekly Installs
367
Repository
GitHub Stars
5
First Seen
Jan 21, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode337
gemini-cli330
codex326
github-copilot317
cursor288
amp242
Flutter应用架构设计指南:分层结构、数据层实现与最佳实践
3,000 周安装
Rust调用关系图生成器 - 可视化函数调用层次结构,提升代码分析效率
539 周安装
parallel-web-extract:并行网页内容提取工具,高效抓取网页数据
595 周安装
腾讯云CloudBase AI模型Web技能:前端调用混元/DeepSeek模型,实现流式文本生成
560 周安装
Apollo Connectors 模式助手:GraphQL API 连接器开发与集成指南
565 周安装
GitHub Trending 趋势分析工具:实时发现热门项目、技术洞察与开源机会
556 周安装
GSAP React 集成教程:useGSAP Hook 动画库与 React 组件开发指南
546 周安装