I am playing with the deferent animations using the alpha C4 framework.
I am trying to shape grow from the midel of the canvas till it covers it completely....Is there any animation that can create that zoom effect?
Yup, you can change and animate a C4Shape like this:
shape.animationDuration = 1.0f; //1 second animation duration
[shape rect:(-1,-1,769,1025)];
Note, the above is for a rectangle that will be 1px larger than the screen of an iPad on all sides. To make an ellipse you'd have to figure out the size of the frame that will encompass an ellipse that covers the whole screen.
Related
I'm trying to implement a custom blur view where the blur radius can be animated, and the blur view can stack blending modes (CGBlendingMode or a CIFilter), all while preserving any animations/actions occurring in the background.
I tried UIVisualEffectView first, but the radius cannot be animated without accessing private APIs which would most likely lead to an app rejection.
The problem with taking a snapshot and applying the effects is that the view is static, and any movement in the background is covered up by the blur view.
I also took a look at FlexMonkey's Blurable, but I had similar results as the snapshot.
Any guidance would be really helpful.
Cheers
Edit: I added a gif to demonstrate what I'm trying to make. The red view moving left to right blurs and multiplies the content below it, while showing the animation occurring on the red/blue square behind it.
Blend modes are extremely tricky and I'm not sure it's possible to apply them to a live UIView (GPUImage might help here) but animating the blur radius (between 0 and UIVisualEffectView's full blur) is possible via this method:
You can animate from a nil effect to an effect like UIBlurEffectStyleDark so if we add an animation and then pause the layer's animations we can control the progress of the effect by adjusting the layer's timeOffset!
- (void) setupBlur {
// Setup the blur to start with no effect
self.blurredEffectView = [[UIVisualEffectView alloc] initWithEffect:nil];
// Add animation to desired blur effect
[UIView animateWithDuration:1.0 animations:^{
[self.blurredEffectView setEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleDark]];
}];
// Pause layer animations
self.blurredEffectView.layer.speed = 0;
}
Adjust blur between 0.0 and 1.0 (animation duration):
- (void) adjustBlur:(CGFloat)blurIntensity {
self.blurredEffectView.layer.timeOffset = blurIntensity;
}
Note: this won't work on iOS 8 where UIBlurEffect animations aren't supported.
I have a the corner points of a rectangle on the screen and want to fit an UIImageView in this rectangle.
I want it like in this picture:
What's the best way to achieve this?
I think black box is UIImageView and you're trying it to place in screen as in the picture.
You can put the imageview in storyboard, in xib or in code to right side of screen. Then rotate it. For example below code rotates the imageview 20 degress.
float degrees = 20; //the value in degrees
imageView.transform = CGAffineTransformMakeRotation(degrees * M_PI/180);
I am testing a UIView using a UISlider as in the example images below:
I have a custom UIView with a yellow background that draws the gray square, the drawRect method is like so:
-(void)drawRect:(CGRect)rect{
NSLog(#"Draw rect called");
UIBezierPath* squarePath = [UIBezierPath bezierPathWithRect: CGRectMake(10, 10, 100, 100)];
[UIColor.grayColor setFill];
[squarePath fill];
}
And the method for my slide changing value:
- (IBAction)changeValue:(id)sender {
CGAffineTransform transform = CGAffineTransformScale(CGAffineTransformIdentity, self.slider.value, self.slider.value);
self.tableView.transform = transform;
[self.tableView setNeedsDisplay];
}
I dont understand why the square is getting larger. I've noticed that drawRect is called every time the slider is moved. If this happens then why is the square size changing? Shouldn't it remain the same size and just the frame grow with the square in the top left corner?
My second question is, how would I change the code so just the frame grows and the drawing size stays the same? I ask this because actually I want the drawing size to change dynamically using my own code in drawRect.
Any pointers would be really appreciated! thanks!
The reason why the size of the square changes is because you've transformed it. Transformations don't just affect the frame of a view; they will affect the content. The square is getting drawn into its context at its constant size (100x100) and then the transform is stretching it before it gets rendered.
The reason why it's not expanding to the right and down is because by default the anchor point of a transform is the center of the bounds. Thus it'll scale from the center outwards. From the documentation:
The origin of the transform is the value of the center property ...
Transformations aren't intended to be used to simply scale the width and height of your frame. The frame property is for that. Simply store the view's frame in a variable, change its width and height, then set it back. In your drawRect: code you can check the dimensions of the rectangle that's given to you and make your square's width/height a percentage of that.
I'm trying to make an animated sine wave similar to this solution:
https://stackoverflow.com/a/17535290
I'm trying to make my sine wave continuous so that I'm constantly drawing the same sine wave. In the solution above, once the starting point of the wave is equal to the width of the frame, the view restarts drawing a new wave.
Can someone explain what CGAffineTransformMakeTranslation(+_self_view.frame.size.width/2, 0); does in the code below? My understanding is that it returns a matrix that shifts the x-axis to the right by half the frame size. I don't understand how that causes the animation to do what it does.
-(void)animateWave {
[UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear animations:^{
_self_view.transform = CGAffineTransformMakeTranslation(+_self_view.frame.size.width/2, 0);
} completion:^(BOOL finished) {
_self_view.transform = CGAffineTransformMakeTranslation(0, 0);
}];
}
There are two views involved. There is the “sine wave” view, and there is the superview (parent) of the sine wave view.
Suppose the superview is 320 points wide - the width of the iPhone screen.
Make the sine wave view 640 points, and draw two cycles of the sine wave in it. Each cycle is exactly 320 points wide. Thus the left 320 points of the sine wave view look exactly like the right 320 points.
Now position the sine wave view in its superview with a frame.x of -320. This means only the right 320 points of the sine wave view are visible:
Now animate the sine wave view to the right by 320 points (half of its width):
When the animation finishes, the visible part of the sine wave view looks identical to the part that was visible before the animation:
If at this point you reset the sine wave view to its initial position (instantly, without animation), the user won't be able to tell, because the visible pixels won't change:
The effect of UIViewAnimationOptionRepeat is to reset the animated parameters to their original states and then start the animation over. Thus if you arrange the sine wave view and its superview as I described, you will get a seamless loop.
Your understanding is correct. Here, the idea is to place the origin at the center of view. Try this, do you see any difference?
CGSize size = self.bounds.size;
CGAffineTransform translate = CGAffineTransformMakeTranslation(size.width / 2, size.height / 2);
The effect that I am trying to achieve is having a circle of light in an area of darkness. The effect is similar to that in pokemon games, when you are in a dark cave and only have limited vision surrounding you. From what I have tried and read, I have been unable to create a mask over nodes in sprite kit that has alpha levels. The masks I manage to create all have a hard edge, and basically just crop. Reading on the apple developer page about the SKCropNode, which has the maskNode property, it says "If the pixel in the mask has an alpha value of less than 0.05, the image pixel is masked out." This unfortunately sounds to me like the pixels will either be completely masked out or completely included, with no alpha values in between. If what I am trying to say has been hard to follow, here is an image of what I have achieved:
https://www.dropbox.com/s/y5gbk8qvuq4ynh0/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.06.23%20PM.png
and here is an image of what I would like to achieve:
https://www.dropbox.com/s/wtwfdi1mjs2n8e6/iOS%20Simulator%20Screen%20shot%20Jan%2020%2C%202014%201.05.54%20PM.png
The way that I managed to get the above result, was I masked out the hard edge circle and then just added an image that has a gradient going from black on the outside to transparent on the inside. The reason this approach doesn't work is because I need to have multiple circles, and with the method I just mentioned, when the circles intersect the darkness on the outside of the transparent circle can be seen.
In conclusion, what I need is a way to have a circle that starts dark in the center, and then fades out. Then, have it so where the circle is dark, the image behind it can be seen, and where the circle is transparent, the image behind it cannot be seen. Again, sorry if what I am saying is difficult to follow. Here is the code I am using. Some of it was found from other posts.
SKSpriteNode *background = [SKSpriteNode spriteNodeWithColor:[SKColor redColor] size:CGSizeMake(500, 500)];
background.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
SKCropNode *cropNode = [[SKCropNode alloc] init];
SKNode *area = [[SKNode alloc] init];
int x = 65; //radius of the circle
_circleMask = [[SKShapeNode alloc ]init];
CGMutablePathRef circle = CGPathCreateMutable();
CGPathAddArc(circle, NULL, 0, 0, x/2, 0, M_PI*2, YES);
_circleMask.path = circle;
_circleMask.lineWidth = x*2;
_circleMask.strokeColor = [SKColor whiteColor];
_circleMask.name=#"circleMask";
_circleMask.position = CGPointMake(CGRectGetMidX(self.frame), CGRectGetMidY(self.frame));
//Here is where I just added in the gradient circle To give the desired appearance, but this isn't necessary to the code
//_circleDark = [SKSpriteNode spriteNodeWithImageNamed:#"GradientCircle"];
//_circleDark.position = [cropNode convertPoint:_circleMask.position fromNode:area];
[area addChild:_circleMask];
[cropNode setMaskNode:area];
[cropNode addChild:background];
//[cropNode addChild:_circleDark];
[self addChild:cropNode];
This method has also allowed me to move the circles around, revealing different parts of the image behind it, which is what I want. To do this I just set it to change the _circleMask.position when the user taps the screen.
Also, just to make this clear in case anyone was confused, the black is just the background color of the scene, the picture is on top of that, and then the circle is part of the mask node.
A very simple (and maybe less... or more performant) version of this would be to simply add a SKSpriteNode on top which has your vignette on a transparent background. In other words, if viewed in Photoshop, you would see a decreasing amount of checkerboard visible in the circle as you go from the center out, eventually displaying solid black. When the PNG image is used in your app, this transparency will be preserved when the two sprites are composited.
I have an idea... I hope it would help.
Make a PNG with the gradient you want from white to black with no transparency.
Use a separate sprite node with the png for each light you want and add them all to a SKEffectNode or SKCropNode node. It doesn't matter which since they are both rendered in a separate context. Set each sprite node to screen blending mode.
Then, when adding the parent SKEffectNode or SKCropNode to the scene, set it to multiply blend mode.
In the end, the screening will merge the "lights" together nicely, while the multiply will make the white area transparent.