I have a custom scroll view with a rectangle inside.
I would like to animate a curve along the top line of this rectangle so that it responds to scroll velocity. When done, it would look something like this:
video: http://capptivate.co/2015/02/01/skype-qik/
How would I accomplish this? Both high-level approaches and specific implementations are welcome, I'm not sure how to get started. (core animation? drawrect?)
This is nicely explained here http://holko.pl/2014/06/26/recreating-skypes-action-sheet-animation/
You can use a bezier path (either in a custom UIView w/ drawRect:, or easier with a CAShapeLayer), whose curvature can be controlled via its control points. So change the control points based on the scrollview's offset and you should have this effect.
Related
I have the following problem: I'm scanning a QR Code with AVFoundation. This works quite well and I can also create a border around the code by adding a subview and set the frame attribute by subview.frame = qrCodeObject.bounds. This only has the problem that the border is only a rectangle and dismisses the perspective of the QR code.
I know that the qrCodeObject has a property corners which incorporates the top right, top left, bottom right and bottom left points of the QR code detected.
My question is now: how can I apply those corner points to the "border" view to make this border to have the same perspective as the QR code? Or in other words: how to "transform" the view according to the corner points?
Thanks a lot in advance!
UPDATE:
Here you can see the problem: the red box is a UIView, having it's frame property set to the QR codes bounds property. This misses perspective. I would like to transform the UIView (the red box) to following the corners property of the QR code, which includes the top right, top left, bottom right and bottom left points (CGPoint) of the QR code. It is important to apply this to a UIView, because I later want to apply it to an ImageView. Also a mask is not usable, as it just hides part of the view, but does not stretch or transform the content of the view.
I found a solution: AGGeometryKit did the trick: https://github.com/hfossli/AGGeometryKit/
Thanks everybody for helping!
You can't transform a CGRect that way, as far as I know. (At least I'm unaware of any framework that can do that kind of image processing.)
What you can do is to draw a polygon using the points of the qrCodeObject.
In drawRect of your UIView, change use CGContext and CGPath to draw the path you'd like.
You want your drawing UIView to be the same size as the one showing the QR code so that you don't have to translate the points onto a second coordinate space.
This answer has directions if you need more guidance on how to do that.
Ok, the problem you are facing is that a CGRect can only represent a rectangle that is not tilted or distorted. What you are dealing with is an image that has different kinds of perspective distortion.
I haven't tried to do this, but it sounds like AVFoundation gives you 4 CGPoint objects for a reason. You need to draw those 4 CGPoints using a UIBezierPath rather than trying to draw a CGRect. Simply create a bezier path that moves to the first point, then draws lines to each subsequent point, and finally, back to the first point. That will give you a quadrilateral that takes into account the distortion of your QR code.
CATransform3DRotate could be your friend, here.
https://guides.codepath.com/ios/Using-Perspective-Transforms might be a good starting point.
I want to create a circular slider like below.
But i want two functionalities in addition.
1) I want to start the slider from any point,but in fig. it starts from 0.
2) I want to include multiple sliders in a single circular black plot.
I'm sharing the link of this project:
https://www.cocoacontrols.com/controls/circularsliderdemo
Can anyone help me to do these functionalities.
Thanks in advance.
Take a look at CAShapeLayer. You could create a path that is a full circle, and use the strokeStart and strokeEnd properties to only draw part of the circle. You could use core animation to animate between the beginning and the end.
There is an open source custom gesture recognizer on Github that is a one finger gesture recognizer. That would be a good start for detecting and responding to the twirl gesture that such a control would need. EDIT: It's called KTOneFingerRotationGestureRecognizer (link)
Those are some ideas to help get you started.
I have a project on github called iOS-CAAnimation-group-demo That includes a "clock wipe" animation. The clock wipe works by setting up a shape layer as the mask layer for an image view, installing a full-circle arc that's wide enough to completely fill a rectangular area, and then animate the strokeEnd property of the shape layer to reveal/hide the image view. The clock wipe is much more complex than what you need, but it would give you the seed of what you want. You'd use a shape layer with a much thinner line width, and you would use it as a content layer, not as a mask.
i have a subclass of UIView that displays own content. I'd like to animate the content.
The content is self-drawn in an own drawRect:, i wonder what possibilities are there to animate it. The content itself consists of graphical shapes that change their form.
I don't see a way to construct the content with subviews that can then be animated themselves.
Is there a way to use an UIView animation block?
Are there other possibilities? I would not want to animate this using OpenGL ES, this would be my last choice.
Thanks for any hints
Torsten
are you sure you can't use CALayer? They are made for this! You can create complex frames/textures (you wrote you have geometric shapes) and apply animated transforms to them.
Consider that if your shapes don't fit in the (really wide array of possibility) of shapes, you can basically draw any line using a CALayer: you create a layer of the proper length and width then simply translate and rotate it as needed (and of course translation an rotation are "animatable").
I need to animate in ios a scatterplot to make it as the line was drawing. There is a similar effect in this website http://www.highcharts.com .I tried unsuccessfully with basic animation but impossible to make this effect.
Does anyone has any idea on how to do it ?
Unfortunately I've found CorePlot's animation capabilities in this area limiting.
However I have had success achieving the same effect by animating expanding the expansion of a regular UIView which encapsulates the graph.
I don't have my code in front of my at the moment by here is a diagram to highlight how I did it:
The key thing here is you start the initial Animation with a UIView which contains the Graph and who's frame is a smaller width than the graph. Then you animate the frame width to be the full graph size.
When this animates it progressively reveals your graph in a smooth animation.
I am a Core Animation newbie and I want to animate a pulsating blue dot very similar to what the Maps application does with the GPS position.
This is not in a map, and this doesn't use Map Kit. It's inside one of my own views (a UIImageView subclass actually), itself inside a UIScrollView.
I am just starting and I am hopeful for suggestions, best practices, perhaps sample code, to speed up my development.
Note a peculiar twist: the look (size) of the pulsating blue dot should preferably not depend on the zoom factor of the host view in its scroll view. I believe Map Kit behaves similarly.
The intent is to attract the user's attention to a specific tiny portion of a crowded image.
Thanks for any suggestion.
You could use two pre-generated images (one with "low light" and one with "high") and animate the transition between the two images. You'd want to use an ease-in curve similar to the map dot (speeds up as it gets brighter) and have it auto-reverse and repeat.
Alternatively, you could use a view with a blue-tinted shadow whose blur radius property is animated between zero and several pixels. With this latter approach, your custom-drawn dot could easily take the scale factor into account when drawing.