I have some square UIView, inside I have an image that looks like a sin signal.
I would like to move that image inside this view from left to right but create infinite effect - so it seems that the sin signal is always going from left to right.
The only way I see is to animate it to move right and when its there simply add it again on left, then remove the previous, etc.
I suspect this would cause memory issues if done on multiple views inside a cell.
Is that the right way to go ?
Related
I have a list of items in a server. These items have scores and the scores correspond to the size of their view (a circle). I would like to depict these items with the largest circle in the center and each successively smaller circle wrapping around it, spiralling smaller and smaller.
Once I achieve this I would like to set it to a scroll. A scroll up will add each successively larger item to the center of the spiral and eventually spiralling down and away and vice versa.
The sizing of these objects I have performed already.
Here's my methodology: Native Swift doesn't have anything to help me layout-wise here to my knowledge. V/HStack won't help and neither will ScrollView. Essentially my understanding is that I should create a path that calculates its spiral based on the sizes of the items and these items should use .offset to position themselves on the path. Using a DragGesture, I can attach a #State variable to determine how far down the path each item is.
This is by far the most complex UI I've attempted so anything to get me down the right path is appreciated.
Edit 1:
Here is the ideal UI:
I'm sure there are various ways to approach this.
Dragging the "top" view down using a UIPanGestureRecognizer - and Scaling it during the drag - is pretty straight-forward. Getting the "already dragged" views to animate around the center is a bit tougher.
One approach is to use a UIViewPropertyAnimator and creating Key Frames for the positions around the arc.
Additional advantages to that include fewer calculations (set scaling and position key frames in .began state) as well as being able to "scrub" through the animation.
I put together a little demo that ended up looking like this:
You can play with the source code here: https://github.com/DonMag/OrbitDrag
I really want to know how to find the EXACT frame of an SKSpriteNode if it is rotated. Currently, the frame of an SKSpriteNode looks like this:
This frame is the rect.frame.
However, this frame includes a lot of empty space due to its zRotation. I don't want this empty space and instead want the frame of exactly the SKSpriteNode.
This is what I want:
How can I achieve this? If you have any idea how to find this 'exact' frame of an SKSpriteNode, I would really like to know. Please use SWIFT.
Thank you
This can be done.
Put a dummy node at the bottom left of your sprite that you know the exact size of. Probably use a perfect square. Anchor it's bottom left to the bottom left of your parent. The parent is the one you want the exact size definition of.
From there, two ways:
Scale the dummy sprite to the size of the sprite you're curious about, and use those measurements to determine where the sprite is and what size it is at any point in time.
Put another dummy sprite at the top right of the parent. In this case you can use the midpoint of your two dummy objects, you don't need to use their edges perfectly. Now you can find the position of these two dummies, at any time, and figure out the size/shape/outline of your sprite in world space units.
Here's way 1 animated
I am using an FBX 3D object file as a game object in my project which have further sub assemblies. Now i want to animate a part of the assembly.
I followed this process:
Select the part which I want to animate.
In the animation panel create one animation.
Add property > transform > position
Using pivot, i move that part to the location where I want to animate.
Challenges
Animate in loop. Moreover if I Select animation file, it does not show Wrap mode
( 1. I don't want any loops in my animation, even after deselecting loop-time it does loop. - I dont know why?
It is animating in reverse. suppose if the object needs to go from position x:3 to position x:8 but it goes from position x:8 to position x:3
the above point happens in loop. just like a ping pong)
Animates in reverse.
I take the whole animation as one loop i.e Part comes out of assembly and goes back and repeating for infinite time.
I want to stop the animation till the point it comes out.
Any help will be appreciated
I need to animate controls by moving them along the x axis from x to x-1000.
My container view is 200 pixels across and each control is 100 pixels wide.
There is a maximum of 4 controls (the controls are heavy and I need to re-use them)
So therefore, as I animate the controls from x to x-1000, I need to re-use them.
So as control 1 goes off to the left, it becomes invisible and needs to be re-positioned to the right hand side of the container view.
As I will be using an ease in function, the control needs to inherit the same speed and deceleration is it had before; so it literally just animates from right to left, once off screen, instantly re-positioned to the right of the container view, and carries on animating from right to left at the same deceleration rate.
Is there anyway to invoke a function for each frame of a CAPropertyAnimation? or something along those lines?
As far as I know, you can't get velocity information from core animation.
You will have to roll your own animation for this. Setup a timer, and give each view an xVelocity. Every time the timer fires, have it adjust the xVelocity of all objects (you could apply a sine curve to it to give it an ease/out effect). Then change the center point of all the objects.
I am trying to figure out how can you drag an image while constraining its movement along a certain path.
I tried several tricks including animation along a path, but couldn't get the animation to play and pause and play backwards - so that seems out of the question.
Any ideas ? anyone ?
What you're basically trying to do is match finger movement to a 'translation' transition.
As the user touches down and starts to move their finger you want to use the current touch point value to create a translation transform which you apply to your UIImageView. Here's how you would do it:
On touch down, save the imageview's starting x,y position.
On move, calculate the delta from old point to new one. This is where you can clamp the values. So you can ignore, say, the y change and only use the x deltas. This means that the image will only move left to right. If you ignore the x and use y, then it only moves up and down.
Once you have the 'new' calculated/clamped x,y values, use it to create a new transform using CGAffineTransformMakeTranslation(x, y). Assign this transform to the UIImageView. The image moves to that place.
Once the finger lifts, figure out the delta from the original starting x,y, point and the lift-off point, then adjust the ImageView's bounds and reset the transform to CGAffineTransformIdentity. This doesn't move the object, but it sets it so subsequent accesses to the ImageView use the actual position and don't have to keep adjusting for transforms.
Moving along on a grid is easy too. Just round out the x,y values in step 2 so they're a multiple of the grid size (i.e. round out to every 10 pixel) before you pass it on to make the translation transform.
If you want to make it extra smooth, surround the code where you assign the transition with UIView animation blocks. Mess around with the easing and timing settings. The image should drag behind a bit but smoothly 'rubber-band' from one touch point to the next.
See this Sample Code : Move Me