zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2026-06-03 23:16:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: animated transform last frame (#2553)

Browse Source 
# Summary

When using the Animated API for animations, it sends the last frame as
JavaScript-parsed (matrix) updates in addition to native (transform)
updates. ~~As a result, we need to ignore one of them.~~ I believe
there's no need to differentiate between native and JavaScript
updates—we can simply save both to the same value (mMatrix). By doing
so, we can avoid duplicating the transforms.

| Before | After |
|--------|--------|
| <video
src="https://github.com/user-attachments/assets/868cc778-4b88-4473-85b5-9665b4b241aa">
| <video
src="https://github.com/user-attachments/assets/c6d17b7b-7c9a-47c3-8286-2d9b5720f261">
|




## Test Plan

```jsx
import React, {useEffect} from 'react';
import {Animated, useAnimatedValue, View} from 'react-native';
import {Rect, Svg} from 'react-native-svg';

const AnimatedRect = Animated.createAnimatedComponent(Rect);
function AnimatedJumpIssue() {
  const animatedValue = useAnimatedValue(100);
  return (
    <>
      <View style={{borderColor: 'black', borderWidth: 1}}>
        <Svg height="100" width="400">
          <AnimatedRect
            x="0"
            y="0"
            width="100"
            height="100"
            fill="black"
            transform={[{translateX: animatedValue}]}
          />
        </Svg>
      </View>
      <Button
        title="Press me"
        onPress={() => {
          Animated.timing(animatedValue, {
            toValue: 200,
            duration: 3000,
            useNativeDriver: true,
          }).start();
        }}
      />
    </>
  );
}
```

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| Android |    ✅      |
| iOS |    ✅      |
| macOS |    ✅      |
This commit is contained in:
Jakub Grzywacz
2024-11-28 12:44:55 +01:00
committed by GitHub
parent d125be1819
commit c617dec1c5
15 changed files with 24 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apple/Elements/RNSVGForeignObject.mm
+1 -2
View File
@@ -160,9 +160,8 @@ using namespace facebook::react;
self.ctm = svgToClientTransform;
self.screenCTM = current;
CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
CGPoint center = CGPointApplyAffineTransform(mid, transform);
CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
self.bounds = bounds;
if (!isnan(center.x) && !isnan(center.y)) {
apple/Elements/RNSVGGroup.mm
+2 -5
View File
@@ -139,9 +139,8 @@ using namespace facebook::react;
self.ctm = svgToClientTransform;
self.screenCTM = current;
CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
CGPoint center = CGPointApplyAffineTransform(mid, transform);
CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
self.bounds = bounds;
if (!isnan(center.x) && !isnan(center.y)) {
@@ -163,7 +162,6 @@ using namespace facebook::react;
}
#endif // macOS]
clipBounds = CGRectApplyAffineTransform(clipBounds, self.matrix);
clipBounds = CGRectApplyAffineTransform(clipBounds, self.transforms);
CGFloat width = CGRectGetWidth(clipBounds);
CGFloat height = CGRectGetHeight(clipBounds);
@@ -200,7 +198,7 @@ using namespace facebook::react;
CGMutablePathRef __block path = CGPathCreateMutable();
[self traverseSubviews:^(RNSVGNode *node) {
if ([node isKindOfClass:[RNSVGNode class]] && ![node isKindOfClass:[RNSVGMask class]]) {
CGAffineTransform transform = CGAffineTransformConcat(node.matrix, node.transforms);
CGAffineTransform transform = node.matrix;
CGPathAddPath(path, &transform, [node getPath:context]);
CGPathAddPath(path, &transform, [node markerPath]);
node.dirty = false;
@@ -216,7 +214,6 @@ using namespace facebook::react;
- (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
transformed = CGPointApplyAffineTransform(transformed, self.invTransform);
if (!CGRectContainsPoint(self.pathBounds, transformed)) {
return nil;
apple/Elements/RNSVGImage.mm
+1 -2
View File
@@ -356,9 +356,8 @@ using namespace facebook::react;
self.ctm = svgToClientTransform;
self.screenCTM = current;
CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
CGPoint center = CGPointApplyAffineTransform(mid, transform);
CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
self.bounds = bounds;
if (!isnan(center.x) && !isnan(center.y)) {
apple/Elements/RNSVGUse.mm
+1 -3
View File
@@ -176,9 +176,8 @@ using namespace facebook::react;
self.ctm = svgToClientTransform;
self.screenCTM = current;
CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
CGPoint center = CGPointApplyAffineTransform(mid, transform);
CGPoint center = CGPointApplyAffineTransform(mid, self.matrix);
self.bounds = bounds;
if (!isnan(center.x) && !isnan(center.y)) {
@@ -190,7 +189,6 @@ using namespace facebook::react;
- (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
transformed = CGPointApplyAffineTransform(transformed, self.invTransform);
RNSVGNode const *definedTemplate = [self.svgView getDefinedTemplate:self.href];
if (event) {
self.active = NO;
apple/RNSVGNode.h
+2 -2
View File
@@ -48,9 +48,7 @@ extern CGFloat const RNSVG_DEFAULT_FONT_SIZE;
@property (nonatomic, assign) CGAffineTransform ctm;
@property (nonatomic, assign) CGAffineTransform screenCTM;
@property (nonatomic, assign) CGAffineTransform matrix;
@property (nonatomic, assign) CGAffineTransform transforms;
@property (nonatomic, assign) CGAffineTransform invmatrix;
@property (nonatomic, assign) CGAffineTransform invTransform;
@property (nonatomic, assign) BOOL active;
@property (nonatomic, assign) BOOL dirty;
@property (nonatomic, assign) BOOL merging;
@@ -148,4 +146,6 @@ extern CGFloat const RNSVG_DEFAULT_FONT_SIZE;
- (CGFloat)getCanvasHeight;
- (void)setTransforms:(CGAffineTransform)transforms;
@end
apple/RNSVGNode.mm
+3 -9
View File
@@ -38,8 +38,6 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
self.opaque = false;
#endif
self.matrix = CGAffineTransformIdentity;
self.transforms = CGAffineTransformIdentity;
self.invTransform = CGAffineTransformIdentity;
_merging = false;
_dirty = false;
}
@@ -250,11 +248,11 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
- (void)setTransforms:(CGAffineTransform)transforms
{
if (CGAffineTransformEqualToTransform(transforms, _transforms)) {
if (CGAffineTransformEqualToTransform(transforms, _matrix)) {
return;
}
_transforms = transforms;
_matrix = transforms;
[self invalidate];
}
@@ -377,7 +375,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
if (_cachedClipPath) {
CGPathRelease(_cachedClipPath);
}
CGAffineTransform transform = CGAffineTransformConcat(_clipNode.matrix, _clipNode.transforms);
CGAffineTransform transform = _clipNode.matrix;
_cachedClipPath = CGPathCreateCopyByTransformingPath([_clipNode getPath:context], &transform);
}
@@ -630,8 +628,6 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
self.opaque = false;
#endif
self.matrix = CGAffineTransformIdentity;
self.transforms = CGAffineTransformIdentity;
self.invTransform = CGAffineTransformIdentity;
_merging = false;
_dirty = false;
@@ -652,9 +648,7 @@ CGFloat const RNSVG_DEFAULT_FONT_SIZE = 12;
_ctm = CGAffineTransformIdentity;
_screenCTM = CGAffineTransformIdentity;
_matrix = CGAffineTransformIdentity;
_transforms = CGAffineTransformIdentity;
_invmatrix = CGAffineTransformIdentity;
_invTransform = CGAffineTransformIdentity;
_active = NO;
_skip = NO;
if (_markerPath) {
apple/RNSVGRenderable.mm
+1 -4
View File
@@ -255,7 +255,6 @@ UInt32 saturate(CGFloat value)
// This needs to be painted on a layer before being composited.
CGContextSaveGState(context);
CGContextConcatCTM(context, self.matrix);
CGContextConcatCTM(context, self.transforms);
CGContextSetAlpha(context, self.opacity);
[self beginTransparencyLayer:context];
@@ -530,8 +529,7 @@ UInt32 saturate(CGFloat value)
}
CGAffineTransform vbmatrix = self.svgView.getViewBoxTransform;
CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
CGAffineTransform matrix = CGAffineTransformConcat(transform, vbmatrix);
CGAffineTransform matrix = CGAffineTransformConcat(self.matrix, vbmatrix);
CGRect bounds = CGRectMake(0, 0, CGRectGetWidth(clientRect), CGRectGetHeight(clientRect));
CGPoint mid = CGPointMake(CGRectGetMidX(pathBounds), CGRectGetMidY(pathBounds));
@@ -687,7 +685,6 @@ UInt32 saturate(CGFloat value)
}
CGPoint transformed = CGPointApplyAffineTransform(point, self.invmatrix);
transformed = CGPointApplyAffineTransform(transformed, self.invTransform);
if (!CGRectContainsPoint(self.pathBounds, transformed) && !CGRectContainsPoint(self.markerBounds, transformed)) {
return nil;
apple/Utils/RNSVGFabricConversions.h
+6 -5
View File
@@ -71,11 +71,12 @@ void setCommonNodeProps(const T &nodeProps, RNSVGNode *node)
nodeProps.matrix.at(4),
nodeProps.matrix.at(5));
}
auto newTransform = nodeProps.resolveTransform(MinimalLayoutMetrics);
CATransform3D transform3d = RCTCATransform3DFromTransformMatrix(newTransform);
CGAffineTransform transform = CATransform3DGetAffineTransform(transform3d);
node.invTransform = CGAffineTransformInvert(transform);
node.transforms = transform;
if (nodeProps.transform.operations.size() > 0) {
auto newTransform = nodeProps.resolveTransform(MinimalLayoutMetrics);
CATransform3D transform3d = RCTCATransform3DFromTransformMatrix(newTransform);
CGAffineTransform transform = CATransform3DGetAffineTransform(transform3d);
node.transforms = transform;
}
node.mask = RCTNSStringFromStringNilIfEmpty(nodeProps.mask);
node.markerStart = RCTNSStringFromStringNilIfEmpty(nodeProps.markerStart);
node.markerMid = RCTNSStringFromStringNilIfEmpty(nodeProps.markerMid);
apple/ViewManagers/RNSVGNodeManager.mm
-1
View File
@@ -32,7 +32,6 @@ RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RNSVGNode)
{
CATransform3D transform3d = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
CGAffineTransform transform = CATransform3DGetAffineTransform(transform3d);
view.invTransform = CGAffineTransformInvert(transform);
view.transforms = transform;
}
RCT_EXPORT_VIEW_PROPERTY(mask, NSString)