I'm looking for a way to indicate a pagecurl animation on an uiview to give the user a hint that he can scroll through some pages. It should be some kind of partial pagecurl.
The problem is that I don't know how to do that. I found some tutorials but only for objective c and I don't know how transfer it into swift:
[UIView animateWithDuration:1.0
animations:^{
CATransition * animation = [CATransition animation];
[animation setDuration:1.2f];
animation.startProgress = 0.0;
animation.endProgress = 0.6;
[animation setTimingFunction:UIViewAnimationCurveEaseInOut];
[animation setType:#"pageCurl"];
[animation setSubtype:#"fromRight"];
[animation setRemovedOnCompletion:NO];
[animation setFillMode: #"extended"];
[animation setRemovedOnCompletion: NO];
[[self.animatedUIView layer] addAnimation:animation
forKey:#"pageFlipAnimation"];
[self.animatedUIView addSubview:tempUIView];
}
];
http://www.iostute.com/2015/04/how-to-implement-partial-and-full-page.html
UIView.animate(withDuration: 1.0, animations: {
let animation = CATransition()
animation.duration = 1.2
animation.startProgress = 0.0
animation.endProgress = 0.6
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
animation.type = "pageCurl"
animation.subtype = "fromRight"
animation.isRemovedOnCompletion = false
animation.fillMode = "extended"
self.animatedUIView.layer.add(animation, forKey: "pageFlipAnimation")
self.animatedUIView.addSubview(tempUIView)
})
For your help I have uppdatedt the same code to the latest version
UIView.animate(withDuration: 1.0, animations: {
let animation = CATransition()
animation.duration = 1.2
animation.startProgress = 0.0
animation.endProgress = 0.6
animation.type = CATransitionType(rawValue: "pageCurl")
animation.subtype = CATransitionSubtype(rawValue: "fromRight")
animation.isRemovedOnCompletion = false
animation.fillMode = CAMediaTimingFillMode(rawValue: "extended")
animation.isRemovedOnCompletion = false
if let animation = animation as? CATransition{
self.view.layer.add(animation, forKey: "pageFlipAnimation")
self.viewDidLoad()
}
self.view.addSubview(self.TableView)
})
I think you can use UIPageViewController.
I did something like this for my project. This tutorial is helpful.
https://spin.atomicobject.com/2015/12/23/swift-uipageviewcontroller-tutorial/
Related
I have a UIView at X=0 and Y=0 location with the height of 110 and UIButton at the bottom of the screen with the height of 50, i want to show both by animating but the UIView must animate from top to to its height and UIButton from bottom to its height, i am totally new with this please help me how to do it.
Following code worked for me to show a search view on top.
if (!isSearchActive) {
[UIView animateWithDuration:0.4
delay:0.1
options: UIViewAnimationOptionCurveEaseIn
animations:^{
searchView.frame = CGRectMake(0, 56, mainWidth, 50);
}
completion:^(BOOL finished){
}];
isSearchActive=YES;
}
else{
[UIView animateWithDuration:0.3
delay:0.1
options: UIViewAnimationOptionCurveEaseIn
animations:^{
searchView.frame = CGRectMake(0, 56, mainWidth, 0);
}
completion:^(BOOL finished){
}];
isSearchActive=NO;
}
Call this code on click of any button to show and hide the view.
Try this for top to bottom Animation:
- (CAAnimation*)movedown;
{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #600;
animation.toValue = #50;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[trashView.layer addAnimation:animation forKey:#"basic"];
trashView.layer.position =CGPointMake(0,-20);
return animation;
}
and Code for Bottom to Top:
- (CAAnimation*)moveup;
{
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = #"position.y";
animation.fromValue = #-500;
animation.toValue = #10;
animation.duration = 0.25;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[trashView.layer addAnimation:animation forKey:#"basic"];
trashView.layer.position =CGPointMake(0,20);
return animation;
}
for first block of code you can use to animate view but you have to replace your viewcontroller at trashview in code.
and second block use for button but you have to replace your button at trashview.
but you can set value of animation according to your need.
basic animation which may fit your requirement
[UIView transitionWithView:view
duration:0.5
options:UIViewAnimationOptionTransitionNone
animations:^{
//update your frame here;
}
completion:nil];
Please go thru Apple Documentation and stack overflow
private func startAnimation() {
let animation = CABasicAnimation(keyPath: "position.y")
animation.fromValue = 10 //Top Y
animation.toValue = 204 //Bottom Y
animation.duration = 15 * 0.10 //duration * speed
animation.repeatCount = 100
animation.autoreverses = false
animation.isRemovedOnCompletion = true
animation.fillMode = .forwards
self.yourView.layer.add(animation, forKey: "position.y")
}
private func stopAnimation() {
self.yourView.layer.removeAllAnimations()
}
I have added transition animation to UILabel for text change.
But it takes place only once when I add it to layer.
- (IBAction)changeText:(id)sender {
if (!self.transitionAnimation) {
CATransition *animation = [CATransition animation];
animation.duration = 0.5;
animation.type = kCATransitionFade;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animation.removedOnCompletion = NO;
[self.label.layer addAnimation:animation forKey:nil];
self.transitionAnimation = animation;
}
self.label.text = [NSString stringWithFormat:#"Text %d",arc4random()];
}
Why do you need to have a strong reference to the animation? That reference doesn't get nil'ed out, and hence your control doesn't enter the if block more than once.
Either nil out the transitionAnimation property on didStop, or don't store a reference at all.
Edit: Also, I don't think you need to have removedOnCompletion as NO.
I'm trying to get a AM/PM lane to fade in & out, but I can't seem to get it to work both ways.
If I only use one it works, but when I try to add two, it just flips back and forth without the proper fade animation.
Can anyone give me some insight on why, and how to fix this?
Heres my code below.
- (void)setState:(MonringNightLabelState)state animated:(BOOL)animated {
CATransition *animationAM = [CATransition animation];
animationAM.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animationAM.type = kCATransitionFade;
animationAM.duration = 0.3;
CATransition *animationPM = [CATransition animation];
animationPM.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animationPM.type = kCATransitionFade;
animationPM.duration = 0.3;
if (animated)
{
[UIView animateWithDuration:0.3
delay:0.0
options:UIViewAnimationOptionBeginFromCurrentState
animations:^{
[self setState:state animated:NO];
}
completion:^(BOOL finished) {
}];
}
switch (state)
{
case MorningNightLabelStateAM:
{
[self.morningNightLabel.layer addAnimation:animationAM forKey:#"kCATransitionFade"];
self.morningNightLabel.text = #"AM";
}
break;
case MorningNightLabelStatePM:
{
[self.morningNightLabel.layer addAnimation:animationPM forKey:#"kCATransitionFade"];
self.morningNightLabel.text = #"PM";
}
break;
}
}
This is the way I fixed it in swift:
var transitionAnimation = CATransition()
transitionAnimation.type = kCATransitionFade
transitionAnimation.duration = 0.2
transitionAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
transitionAnimation.fillMode = kCAFillModeBoth
self.titleLabel.layer.addAnimation(transitionAnimation, forKey: "fadeAnimation")
self.titleLabel.text = newTitle
which is working for me.
Probably this should be enough:
CATransition *animationPM = [CATransition animation];
animationPM.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animationPM.type = kCATransitionFade;
animationPM.duration = 0.3;
[self.morningNightLabel.layer addAnimation:animationAM forKey:#"kCATransitionFade"];
self.morningNightLabel.text = (state == MorningNightLabelStateAM) ? #"AM" : #"PM";
I'm new to iPhone developing,am using folling code to animate my UIButton it's animating perfectly but when i click the button the action not firing. plese help me out from this.
[UIButton animateWithDuration:3.0
delay:0.0f
options: UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationOptionBeginFromCurrentState
animations: ^(void){
CGPoint p = Mybutton.center;
p.y += 100;
Mybutton.center = p;
}
completion:NULL];
Is this code in the button action or viewDidLoad? Try this one :
- (IBAction)buttonAnimation:(id)sender {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.duration = .3;
animation.repeatCount = 5;
animation.fromValue = [NSValue valueWithCGPoint:yourButton.center];
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(yourButton.center.x, yourButton.center.y-30)];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
animation.autoreverses = YES;
animation.removedOnCompletion = NO;
[yourButton.layer addAnimation:animation forKey:#"position"];}
You should put it in the button action.
Hope it helps
I have this code to animate a CALayer element.
CABasicAnimation *makeBiggerAnim=[CABasicAnimation animationWithKeyPath:#"radius"];
makeBiggerAnim.duration=0.2;
makeBiggerAnim.fromValue=[NSNumber numberWithDouble:20.0];
makeBiggerAnim.toValue=[NSNumber numberWithDouble:40.0];
makeBiggerAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
My question is, now everything works fine, I would like another attribute of the same element at the same time. I've seen you can do additive animations and stuff.
My question is:
Is the additive attribute the best / only way to do that? (animating at once multiple properties of the same object at once )
Thanks!
You can create an CAAnimationGroup and customize the duration and timing function on it. Then you create all your CABasicAnimations, set their to value and add them to the animation group. Finally, you add the animation group to the layer that you are animating.
Here an example:
CABasicAnimation *makeBiggerAnim=[CABasicAnimation animationWithKeyPath:#"cornerRadius"];
makeBiggerAnim.fromValue=[NSNumber numberWithDouble:20.0];
makeBiggerAnim.toValue=[NSNumber numberWithDouble:40.0];
CABasicAnimation *fadeAnim=[CABasicAnimation animationWithKeyPath:#"opacity"];
fadeAnim.fromValue=[NSNumber numberWithDouble:1.0];
fadeAnim.toValue=[NSNumber numberWithDouble:0.0];
CABasicAnimation *rotateAnim=[CABasicAnimation animationWithKeyPath:#"transform.rotation.y"];
rotateAnim.fromValue=[NSNumber numberWithDouble:0.0];
rotateAnim.toValue=[NSNumber numberWithDouble:M_PI_4];
// Customizing the group with duration etc, will apply to all the
// animations in the group
CAAnimationGroup *group = [CAAnimationGroup animation];
group.duration = 0.2;
group.repeatCount = 3;
group.autoreverses = YES;
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.animations = #[makeBiggerAnim, fadeAnim, rotateAnim];
[myLayer addAnimation:group forKey:#"allMyAnimations"];
let groupAnimation = CAAnimationGroup()
groupAnimation.beginTime = CACurrentMediaTime() + 0.5
groupAnimation.duration = 0.5
let scaleDown = CABasicAnimation(keyPath: "transform.scale")
scaleDown.fromValue = 3.5
scaleDown.toValue = 1.0
let rotate = CABasicAnimation(keyPath: "transform.rotation")
rotate.fromValue = .pi/10.0
rotate.toValue = 0.0
let fade = CABasicAnimation(keyPath: "opacity")
fade.fromValue = 0.0
fade.toValue = 1.0
groupAnimation.animations = [scaleDown,rotate,fade]
loginButton.layer.add(groupAnimation, forKey: nil)
This is for the newest update on swift (swift 3). Your code should include a object at the end, i.e. UIButton, UILabel, something that you can animate. In my code it was the loginButton (which was the title or name).
In Swift-3 we can use CAAnimationGroup as below :-
let position = CAKeyframeAnimation(keyPath: "position")
position.values = [ NSValue.init(cgPoint: .zero) , NSValue.init(cgPoint: CGPoint(x: 0, y: -20)) , NSValue.init(cgPoint: .zero) ]
position.timingFunctions = [ CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) ]
position.isAdditive = true
position.duration = 1.2
let rotation = CAKeyframeAnimation(keyPath: "transform.rotation")
rotation.values = [ 0, 0.14, 0 ]
rotation.duration = 1.2
rotation.timingFunctions = [ CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) ]
let fadeAndScale = CAAnimationGroup()
fadeAndScale.animations = [ position, rotation]
fadeAndScale.duration = 1