I'm trying to animate the X value from 0 to PI, and the Y value from 0 to sin(x).
Something like:
this.positionX = new Animated.Value(0);
Animated.timing(
this.positionX, {
toValue: Math.PI,
duration: 1000,
}
).start();
// this obviously won't work
this.positionY = Math.sin(this.positionX);
I tried interpolating the X value with:
this.positionX.interpolate({
inputRange: [0, ..., PI],
outputRange: [0, ..., sin(PI)],
});
but I still get a linear approximation and slows down the animation drastically.
How can I compose an Animated.Value from a custom function the same way Animated.add or Animated.divide work?
Related
Im using GSAP with MotionPathPlugin and the PixiPlugin to make my square follow a path. I have set autoRotate to true but there seems to be a bug, as you can see in the GIF. Seems like my sprite is over rotating a little bit.
The path is an array of {x, y} values.
I also tried using the array method for autoRotate as such autoRotate: ['x', 'y', 'angle', 90, true], // 4th param is angle in rad
motionPath: {
autoRotate: ['x', 'y', 'angle', 90, true], // 4th param is angle in rad
alignOrigin: [0.5, 0.5],
// autoRotate: true,
align: values,
path: values,
curviness: 0,
},
Thank you for any input.
After a lot of searching I found I need to useRadians: true, in the MotionPath vars option.
gsap.to(sprite, {
motionPath: {
autoRotate: 1.5708,//in radians, offset rotation by 90 degree
path: values,
curviness: 0,
useRadians: true,
},
}
With const animation = new Animated.ValueXY() I can do
Animated.timing(animation, { toValue: 0, duration: 500})
How can I accomplish this on both X and Y with const animation = new Animated.ValueXY()?
The same way as initializing the values to const animation = new Animated.ValueXY({x: 0, y: 0}):
Animated.timing(animation, {
toValue: {x: 0, y: 0},
duration: 500
})
Behavior is the same for all Animated.ValueXY related operations. {x: num, y: num} instead of a number.
Don't know why, but Animated doesn't have a property subtract (eg. Animated.subtract(a,b).
How can I subtract two Animated.Values?
Another way to do this is to combine Animated.add with Animated.multiply i.e. Animated.add(x, Animated.multiply(-1, y))
Animated has now a subtract method.
Reference: https://facebook.github.io/react-native/docs/animated#subtract
I solved this by Interpolating the interpolated value.
http://facebook.github.io/react-native/releases/0.43/docs/animated.html#interpolation
For those who is looking for it, just use
Animated.add(endAnimatedValue, startAnimatedValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
}))
This part:
inputRange: [0, 1],
outputRange: [1, 0],
negate the outcome of the 'startAnimatedValue'
There is no Animated.subtract but there is Animated.add which you can also use for subtracting. In the end subtracting is adding negative values.
const y = new Animated.Value(4)
const x = new Animated.Value(-2)
Animated.add(y, x) // Results in animated value 2
http://facebook.github.io/react-native/releases/0.43/docs/animated.html#add
Full example
import { Animated } from 'react-native'
const a = new Animated.Value(2);
const b = new Animated.Value(1)
const val = Animated.subtract(a,b) //val = b - a;
I need to find the Line coordinates(x1,y1,x2,y2) after the object has been modified. (moved, scaled, rotated)
I thought to use the oCoords information and based on angle and flip information to decide which corners are the line ends, but it seems that it will not be too accurate…
Any help?
Example:
x1: 164,
y1: 295.78334045410156,
x2: 451,
y2: 162.78334045410156
x: 163, y: 161.78334045410156 - top left corner
x: 452, y: 161.78334045410156 - top right corner
x: 163, y: 296.78334045410156 - bottom left corner
x: 452, y: 296.78334045410156 - bottom right corner
When Fabric.js calculates oCoords - i.e. object's corners' coordinates - it takes into account the object's strokeWidth:
// fabric.Object.prototype
_getNonTransformedDimensions: function() {
var strokeWidth = this.strokeWidth,
w = this.width + strokeWidth,
h = this.height + strokeWidth;
return { x: w, y: h };
},
For most objects, stroke is kind of a border that outlines the outer edges, so it makes perfect sense to account for strokeWidth it when calculating corner coordinates.
In fabric.Line, though, stroke is used to draw the body of the line. There is no example in the question but I assume this is the reason behind discrepancies between the real end-point coordinates and those in oCoords.
So, if you really want to use oCoords to detect the coordinates of the end points, you'll have to adjust for strokeWidth / 2, e.g.
const realx1 = line.oCoords.tl.x + line.strokeWidth / 2
const realy1 = line.oCoords.tl.y + line.strokeWidth / 2
Keep in mind that fabric.Line's own _getNonTransformedDimensions() does adjust for strokeWidth, but only when the line's width or height equal 0:
// fabric.Line.prototype
_getNonTransformedDimensions: function() {
var dim = this.callSuper('_getNonTransformedDimensions');
if (this.strokeLineCap === 'butt') {
if (this.width === 0) {
dim.y -= this.strokeWidth;
}
if (this.height === 0) {
dim.x -= this.strokeWidth;
}
}
return dim;
},
I m using zedGraph dll to save image of my graphs using points. Now I need to save a graphs with 1-X Axis and 3-Y axis. Also with 3-X axis and 1-Yaxis. Please help me out.
For the Y axis, this issue is fairly simple. Just add a sufficient number of YAxis objects to the GraphPane.YAxisList and associate the curves with respective axis by setting the YAxisIndex.
After adding all curves to the graph, update the scales of the Y axes by calling GraphPane.AxisChange().
Example:
var pane = zedGraphControl1.GraphPane;
pane.YAxisList.Clear();
var y1 = pane.AddYAxis("First");
var y2 = pane.AddYAxis("Secnd");
var y3 = pane.AddYAxis("Third");
var curve1 = new LineItem(null, new[] { 0.1, 0.5, 0.9 },
new[] { 0.8, 0.3, 0.1 }, Color.Blue, SymbolType.None) { YAxisIndex = y1 };
pane.CurveList.Add(curve1);
var curve2 = new LineItem(null, new[] { 0.1, 0.5, 0.9 },
new[] { -0.8, -0.3, -0.1 }, Color.Green, SymbolType.None) { YAxisIndex = y2 };
pane.CurveList.Add(curve2);
var curve3 = new LineItem(null, new[] { 0.1, 0.5, 0.9 },
new[] { -0.009, 0.001, 0.008 }, Color.Red, SymbolType.None) { YAxisIndex = y3 };
pane.CurveList.Add(curve3);
pane.AxisChange();
will produce the following result:
For X axes, you would be able to have 2 different X axes by utilizing both the XAxis and X2Axis properties of the graph pane, and setting the IsX2Axis property to true for the curve that should reference the second X axis.
I do not know of a solution for more than 2 X axes, though.