Re: Animation along a curve w/scale & alpha & orientation
Re: Animation along a curve w/scale & alpha & orientation
- Subject: Re: Animation along a curve w/scale & alpha & orientation
- From: "Eric E. Dolecki" <email@hidden>
- Date: Fri, 20 Nov 2015 18:54:03 +0000
I discovered that little gem and it works quite well. I've whipped up a
solution. My delay of animation to put space between images seems hackish.
If there is a different way I would love to hear it.
Here is the gist of my code (a class for Counting Sheep ;)) It's not too
long or I'd hesitate to paste here.
import UIKit
class CountingSheepUI: UIView {
var myFrame: CGRect!
var container: UIView!
var sheep1: UIImageView!
var sheep2: UIImageView!
var sheep3: UIImageView!
var pathAnimation: CAKeyframeAnimation!
var scaleAnimation: CAKeyframeAnimation!
var alphaAnimation: CAKeyframeAnimation!
var group: CAAnimationGroup!
var pausedTime: CFTimeInterval?
var paused: Bool = false
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
myFrame = frame
container = UIView(frame: myFrame)
container.backgroundColor = UIColor.purpleColor() //testing
self.addSubview(container)
sheep1 = UIImageView(frame: CGRect(x: 70, y: 120, width: 60,
height: 30))
sheep1.contentMode = .ScaleAspectFit
sheep1.image = UIImage(named: "sheep.png")
container.addSubview(sheep1)
sheep2 = UIImageView(frame: CGRect(x: 70, y: 120, width: 60,
height: 30))
sheep2.contentMode = .ScaleAspectFit
sheep2.image = UIImage(named: "sheep.png")
container.addSubview(sheep2)
sheep3 = UIImageView(frame: CGRect(x: 70, y: 120, width: 60,
height: 30))
sheep3.contentMode = .ScaleAspectFit
sheep3.image = UIImage(named: "sheep.png")
container.addSubview(sheep3)
let mask = CALayer()
mask.frame = CGRect(x: 0, y: 0, width: myFrame.size.width, height:
100)
mask.backgroundColor = UIColor.blackColor().CGColor
container.layer.mask = mask
container.layer.masksToBounds = true
animate()
}
func animate(){
pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.setValue("turnAnimation", forKey: "tag")
pathAnimation.rotationMode = kCAAnimationRotateAuto
pathAnimation.calculationMode = kCAAnimationPaced
let curvedPath = CGPathCreateMutable()
CGPathMoveToPoint(curvedPath, nil, 70, 120)
CGPathAddCurveToPoint(curvedPath, nil, 70, 120, 160, -10, 250, 120)
pathAnimation.path = curvedPath
scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
scaleAnimation.values = [0.6, 1.0, 0.6]
alphaAnimation = CAKeyframeAnimation(keyPath: "opacity")
alphaAnimation.values = [0.0, 1.0, 0.0]
group = CAAnimationGroup()
group.animations = [pathAnimation, scaleAnimation, alphaAnimation]
group.duration = 12.0
group.repeatCount = Float.infinity
group.removedOnCompletion = false
group.fillMode = kCAFillModeRemoved
sheep1.layer.addAnimation(group, forKey: "jump")
var delayInSeconds = 4.0;
var delay = delayInSeconds * Double(NSEC_PER_SEC)
var popTime = dispatch_time(DISPATCH_TIME_NOW, Int64(delay));
dispatch_after(popTime, dispatch_get_main_queue(), {
self.sheep2.layer.addAnimation(self.group, forKey: "jump2")
});
delayInSeconds = 8.0;
delay = delayInSeconds * Double(NSEC_PER_SEC)
popTime = dispatch_time(DISPATCH_TIME_NOW, Int64(delay));
dispatch_after(popTime, dispatch_get_main_queue(), {
self.sheep3.layer.addAnimation(self.group, forKey: "jump3")
});
}
func pauseAnimation(){
if paused == false {
paused = true
} else {
return
}
pausedTime = sheep1.layer.convertTime(CACurrentMediaTime(),
fromLayer: nil)
sheep1.layer.speed = 0
sheep1.layer.timeOffset = pausedTime!
sheep2.layer.speed = 0
sheep2.layer.timeOffset = pausedTime!
sheep3.layer.speed = 0
sheep3.layer.timeOffset = pausedTime!
}
func unPauseAnimation(){
if paused == false {
return
} else {
paused = false
}
pausedTime = sheep1.layer.timeOffset
sheep1.layer.speed = 1.0
sheep1.layer.timeOffset = 0
sheep1.layer.beginTime = 0
sheep2.layer.speed = 1.0
sheep2.layer.timeOffset = 0
sheep2.layer.beginTime = 0
sheep3.layer.speed = 1.0
sheep3.layer.timeOffset = 0
sheep3.layer.beginTime = 0
let timeSincePause = sheep1.layer.convertTime(CACurrentMediaTime(),
fromLayer: nil) - pausedTime!
sheep1.layer.beginTime = timeSincePause
sheep2.layer.beginTime = timeSincePause
sheep3.layer.beginTime = timeSincePause
}
}
On Fri, Nov 20, 2015 at 12:47 PM Puneet Bhardwaj <
email@hidden> wrote:
> Try setting rotationMode = kCAAnimationRotateAuto on the KeyframeAnimation
>
> If you can translate the values along the path to angles, you can apply
> affine rotate transform to the image to orient it to the path. Alpha value
> might be a function of angle too.
>
> Regards,
> Puneet
>
>
> On Thursday, November 19, 2015, Eric E. Dolecki <email@hidden>
> wrote:
>
>> [image: sheep.png]Greetings. I am looking to animate images along a path,
>> that orient to the path, and scale up at the top of the path, fade in at
>> one side, full alpha at top, and then fade out.
>>
>> I am able to animate along a CAKeyframeAnimation path, not sure about an
>> event when each sheep is at the end, don't know how to orient the image to
>> the path, etc. This is for a gentle counting sheep animation that would
>> slowly loop forever.
>>
>> Thanks,
>> Eric
>>
>
_______________________________________________
Cocoa-dev mailing list (email@hidden)
Please do not post admin requests or moderator comments to the list.
Contact the moderators at cocoa-dev-admins(at)lists.apple.com
Help/Unsubscribe/Update your Subscription:
This email sent to email@hidden