motion-on-native 1.1.3 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +2 -0
- package/lib/index.js +38 -12
- package/package.json +1 -1
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -53,6 +53,8 @@ const DEFAULT_TRANSITION = {
|
|
|
53
53
|
damping: 15,
|
|
54
54
|
stiffness: 100,
|
|
55
55
|
duration: 300,
|
|
56
|
+
repeat: 0,
|
|
57
|
+
repeatType: 'loop',
|
|
56
58
|
};
|
|
57
59
|
function createMotionComponent(Component) {
|
|
58
60
|
return function MotionComponent(props) {
|
|
@@ -128,26 +130,50 @@ function createMotionComponent(Component) {
|
|
|
128
130
|
// Animation helper
|
|
129
131
|
const animateToValues = (targetValues, transitionConfig = transition) => {
|
|
130
132
|
Object.entries(targetValues).forEach(([key, value]) => {
|
|
131
|
-
var _a
|
|
133
|
+
var _a;
|
|
132
134
|
if (value !== undefined) {
|
|
133
135
|
const sharedValue = getSharedValue(key);
|
|
134
136
|
if (sharedValue) {
|
|
135
|
-
const
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
137
|
+
const animateWithRepeat = (currentValue, targetValue, repeatCount) => {
|
|
138
|
+
var _a, _b, _c, _d, _e;
|
|
139
|
+
const config = transitionConfig.type === 'spring'
|
|
140
|
+
? (0, react_native_reanimated_1.withSpring)(targetValue, {
|
|
141
|
+
damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
|
|
142
|
+
stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
|
|
143
|
+
mass: (_c = transitionConfig.mass) !== null && _c !== void 0 ? _c : 1,
|
|
144
|
+
})
|
|
145
|
+
: (0, react_native_reanimated_1.withTiming)(targetValue, {
|
|
146
|
+
duration: (_d = transitionConfig.duration) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.duration,
|
|
147
|
+
});
|
|
148
|
+
sharedValue.value = config;
|
|
149
|
+
// Handle repeat
|
|
150
|
+
if (transitionConfig.repeat && repeatCount > 0) {
|
|
151
|
+
const duration = (_e = transitionConfig.duration) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.duration;
|
|
152
|
+
setTimeout(() => {
|
|
153
|
+
const nextTarget = transitionConfig.repeatType === 'reverse'
|
|
154
|
+
? (sharedValue.value === targetValue ? currentValue : targetValue)
|
|
155
|
+
: targetValue;
|
|
156
|
+
const nextCurrent = transitionConfig.repeatType === 'reverse'
|
|
157
|
+
? (sharedValue.value === targetValue ? targetValue : currentValue)
|
|
158
|
+
: currentValue;
|
|
159
|
+
if (transitionConfig.repeat === 'infinity') {
|
|
160
|
+
animateWithRepeat(nextCurrent, nextTarget, Infinity);
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
animateWithRepeat(nextCurrent, nextTarget, repeatCount - 1);
|
|
164
|
+
}
|
|
165
|
+
}, duration);
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
const currentValue = sharedValue.value;
|
|
169
|
+
const repeatTimes = transitionConfig.repeat === 'infinity' ? Infinity : ((_a = transitionConfig.repeat) !== null && _a !== void 0 ? _a : 0);
|
|
144
170
|
if (transitionConfig.delay) {
|
|
145
171
|
setTimeout(() => {
|
|
146
|
-
|
|
172
|
+
animateWithRepeat(currentValue, value, repeatTimes);
|
|
147
173
|
}, transitionConfig.delay);
|
|
148
174
|
}
|
|
149
175
|
else {
|
|
150
|
-
|
|
176
|
+
animateWithRepeat(currentValue, value, repeatTimes);
|
|
151
177
|
}
|
|
152
178
|
}
|
|
153
179
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "motion-on-native",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "Framer Motion-inspired animation library for React Native with Reanimated. Easy spring animations, gestures, and transitions for mobile apps.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|