I am trying to extract animations from one DAE file that contains a few animations. I want to break up the animation in groups so I can play specific animations in the timeline.
I am using the "skinning" slide from the WWDC as a reference, but it is all in objective-c and I think something has been lost in translation when trying to do this in swift.
I have my character loaded in the scene but when i run this code the animation does not run. Whats going on?
for animationID in animationsIDs {
if let animation = sceneSource.entryWithIdentifier(animationID, withClass: CAAnimation.self) as? CAAnimation {
var maxDuration = max(maxDuration, animation.duration);
longAnimations.append(animation)
}
let longAnimationsGroup = CAAnimationGroup()
longAnimationsGroup.animations = longAnimations
longAnimationsGroup.duration = maxDuration
let idleAnimationGroup :CAAnimationGroup = longAnimationsGroup.copy() as CAAnimationGroup
idleAnimationGroup.timeOffset = 0.0
_idleAnimationGroup.animations = [idleAnimationGroup]
_idleAnimationGroup.duration = 1.0
_idleAnimationGroup.repeatCount = FLT_MAX
_idleAnimationGroup.autoreverses = true
SCNTransaction.begin()
self._character.addAnimation(_idleAnimationGroup, forKey: "animation")
SCNTransaction.commit()
it seems that your for loop is missing a closing bracket. Currently you are adding (and thus overriding) an animation with the key "animation" for each animationID
how and where is _idleAnimationGroup created?
Related
I animate the color of CAShapeLayers stored in an Array using CABasicAnimation. The animation displays erratically depending on the animation.duration and I cannot figure out why. I suspect an issue with animation.beginTime = CACurrentMediaTime() + delay
Animation Description
The animation consists in successively flashing shapes to yellow before turning them to black once the animation ends.
Current State of the animation
When the animation duration is above a certain time, it works properly.
For instance with a duration of 2 seconds:
But when I shorten the duration, the result substantially differs.
For instance, with a duration of 1 second:
You will notice that the animation has already cached/ended for the first 10 bars or so, then waits and starts animating the remainder of the shapes.
Likewise, with a duration of 0.5s:
In this case, it seems an even larger number of animation has already ended (shapes are black) before it displays some animation after a certain time. You can also notice that although the shape color animation is supposed to last the same duration (0.5s) some feels quicker than others.
The Code
The animation is called in the viewDidAppear method of the UIViewController class.
I have created a UIView custom class to draw my shapes and I animate them using an extension of the class.
The code to animate the color:
enum ColorAnimation{
case continuousSwap
case continousWithNewColor(color: UIColor)
case randomSwap
case randomWithNewColor(color: UIColor)
case randomFromUsedColors
}
func animateColors(for duration: Double,_ animationType: ColorAnimation, colorChangeDuration swapColorDuration: Double){
guard abs(swapColorDuration) != Double.infinity else {
print("Error in defining the shape color change duration")
return
}
let animDuration = abs(duration)
let swapDuration = abs(swapColorDuration)
let numberOfSwaps = Int(animDuration / min(swapDuration, animDuration))
switch animationType {
case .continousWithNewColor(color: let value):
var fullAnimation = [CABasicAnimation]()
for i in (0...numberOfSwaps) {
let index = i % (self.pLayers.count)
let fromValue = pLayers[index].pattern.color
let delay = Double(i) * swapDuration / 3
let anim = colorAnimation(for: swapDuration, fromColor: value, toColor: fromValue, startAfter: delay)
fullAnimation.append(anim)
}
for i in (0...numberOfSwaps) {
CATransaction.begin()
let index = i % (self.pLayers.count)
CATransaction.setCompletionBlock {
self.pLayers[index].shapeLayer.fillColor = UIColor.black.cgColor
}
pLayers[index].shapeLayer.add(fullAnimation[i], forKey: "fillColorShape")
CATransaction.commit()
}
default:
()
}
}
The segment the whole duration of the animation by the duration of the color change (e.g. if the whole animation is 10s and each shape changes color in 1s, it means 10 shapes will change color).
I then create the CABasicaAnimation objects using the method colorAnimation(for: fromColor, toColor, startAfter:).
func colorAnimation(for duration: TimeInterval, fromColor: UIColor, toColor: UIColor, reverse: Bool = false, startAfter delay: TimeInterval) -> CABasicAnimation {
let anim = CABasicAnimation(keyPath: "fillColor")
anim.fromValue = fromColor.cgColor
anim.toValue = toColor.cgColor
anim.duration = duration
anim.autoreverses = reverse
anim.beginTime = CACurrentMediaTime() + delay
return anim
}
Finally I add the animation to the adequate CAShapeLayer.
The code can obviously be optimized but I chose to proceed by these steps to try to find why it was not working properly.
Attempts so far
So far, I have tried:
with and without setting the animation.beginTime in the colorAnimation method, including with and without CACurrentMediaTime(): if I don't set the animation.beginTime with CACurrentMediaTime, I simply do not see any animation.
with and without pointing animation.delegate = self: it did not change anything.
using DispatchQueue (store the animations in global and run it in main) and as suspected, the shapes did not animate.
I suspect something is not working properly with the beginTime but it might not be the case, or only this because even when the shapes animate, the shape animation duration seems to vary whilst it should not.
Thank very much in advance to have a look to this issue. Any thoughts are welcome even if it seems far-fetched it can open to new ways to address this!
Best,
Actually there is a relationship between duration and swapColorDuration
func animateColors(for duration: Double,_ animationType: ColorAnimation, colorChangeDuration swapColorDuration: Double)
when you call it, you may need to keep this relationship
let colorChangeDuration: TimeInterval = 0.5
animateColors(for: colorChangeDuration * TimeInterval(pLayers.count), .continousWithNewColor(color: UIColor.black), colorChangeDuration: colorChangeDuration)
Also here :
let numberOfSwaps = Int(animDuration / min(swapDuration, animDuration)) - 1
This value maybe a little higher than you need.
or
The problem lies in this let index = i % (self.pLayers.count)
if numberOfSwaps > self.pLayers.count, some bands will be double animations.
let numberOfSwaps1 = Int(animDuration / min(swapDuration, animDuration))
let numberOfSwaps = min(numberOfSwaps1, self.pLayers.count)
in the rest is
for i in (0..<numberOfSwaps) {... }
Now if numberOfSwaps < self.pLayers.count. It's not finished.
if numberOfSwaps is larger, It is fine.
If double animations are required, changes the following:
pLayers[index].shapeLayer.add(fullAnimation[i], forKey: nil)
or pLayers[index].shapeLayer.add(fullAnimation[i], forKey: "fillColorShape" + String(i))
The goal is to animate particles coming from a SKEmitterNode, but the following code doesn't work. The particles don't change texture. They only show the first texture -- or more specifically the original image used in the Xcode Particle Editor -- during the lifetime.
The particle lifetime is longer than the frame duration so this isn't the issue.
// Create animation textures
let animationAtlas = SKTextureAtlas(named: atlasFilename)
var animationFrames = [SKTexture]()
// Set number of animation frames
let numImages = animationAtlas.textureNames.count
// Load texture array
for i in 0..<numImages {
let textureName = "\(texturePrefix)\(i)"
animationFrames.append(animationAtlas.textureNamed(textureName))
}
// Create emitter node w/ animation on each particle
let emitterNode = SKEmitterNode(fileNamed: EmitterFilename)!
let animation = SKAction.animate(with: animationFrames, timePerFrame: 0.05)
emitterNode.particleAction = animation
// Define fade out sequence
let fadeOut = SKAction.fadeOut(withDuration: sparkleFadeOutDur)
let remove = SKAction.removeFromParent()
let sequence = SKAction.sequence([fadeOut, remove])
// Add emitter node to scene
addChild(emitterNode)
emitterNode.run(sequence)
While your code looks flawless and this may potentially be a bug of the particle engine, it's worth assuming that your animation runs out of frames before the particles become large or visible enough so that you see the animation perform. If that's the case, after the animation is finished the texture may revert back to the original texture that you're seeing.
To check if that's the issue, you may want to wrap your animate action into a repeatForever action:
repeatAction = SKAction.repeatForever(animation)
and then change the particleAction assignment as follows:
emitterNode.particleAction = repeatAction
It's worth noting that Apple's documentation seems contradictory. At this page (https://developer.apple.com/reference/spritekit/skaction/1417828-animate) we see: "This action can only be executed by an SKSpriteNode object."
Particles are clearly not accessible sprite nodes as this page (https://developer.apple.com/reference/spritekit/skemitternode) states, but at the same time they should behave like sprites:
"For the purpose of using actions on particles, you can treat the particle as if it were a sprite. This means you can perform other interesting tricks, such as animating the particle’s textures."
I have a CABasicAnimation involving multiple shapes that shows a transition between two different navigations. It's essentially a morph with an x duration.
However, there are a couple of requirements that I don't know how to deal with (and my googlefu isn't helping)
I need to be able to show an arbitrary point of the animation. For instance, if I'm mid-swipe between two views I need to be able to show the animation at 50%.
I need to be able to start the animation at an arbitrary point. In the previous case, if I'm mid-swipe and release the view I need to be able to complete the animation from 50% to 100%.
I gave it a shot with timeSincePause (code) but I can't get anywhere with the animation.
As an aid I have these two methods,
If the method of Resume an animation is an implicit way of continuing the same from a certain point with difference that is continuous from a time X which is defined by the pause method, how can I get it to NOT be the pause method that defines Continue beginTime if not already determined
#IBAction func tapPause() {
let pausetime = shape.convertTime(CACurrentMediaTime(), from: nil)
shape.speed = 0.0
shape.timeOffset = pausetime
}
#IBAction func tapResume() {
let pausedTime = shape.timeOffset
shape.speed = 1.0
shape.timeOffset = 0.0
shape.beginTime = 0.0
let timeSincePause = shape.convertTime(CACurrentMediaTime(), from: nil) - pausetime
shape.beginTime = timeSincePause
}
Which methods should I research to get this done?
I'm using Facebook pop framework to perform some cool animations. I'm shaking a button in this way :
let rotation = POPSpringAnimation.init(propertyNamed: kPOPLayerRotation)
rotation.springBounciness = 30
rotation.springSpeed = 20
rotation.velocity = 30.0
rotation.repeatForever = true
button.layer.pop_addAnimation(rotation, forKey: "rotation")
Despite of the repeatForever set to true the animation doesn't repeat. I noticed that if we have the toValue property set, the animation repeats. Am I doing something wrong?
I solved this issue adding the following:
rotation.fromValue = 0.0
You can do it with POPBasicAnimation. If you're rotating forever, you may not need the spring animation.
Looking at your code, you don't have a rotation.toValue You need to tell the animation how far to rotate. Try this:
func configureBtnRotation(btn: UIButton) {
let rotation = POPBasicAnimation(propertyNamed: kPOPLayerRotation)
rotation.toValue = 90.0
rotation.duration = 100.0 //this sets the speed of rotation
rotation.repeatForever = true
button.layer.pop_addAnimation(rotation, forKey: "rotation")
}
Hope this helps.
I want to animate 3 different images at specific point in time such that it behaves this way.
1) 1st image moves from (Xx, Yx) to (Xz,Yz)
2) Wait 10 seconds
3) 2nd image appears in place at Xa,Yb
4) Wait half as long as in step 2
5) Fade out 2nd image
6) 3rd image appears at the same place as 2nd image
If each of these image's animations are on their own CALayers, can I use CAKeyframeAnimation with multiple layers? If not, what's another way to go about doing staggered animations?
I'm trying to animate a playing card move from offscreen to a particular spot and then few other tricks to appear on screen several seconds later.
Edited
When I wrote this, I thought you could not use a CAAnimationGroup to animate multiple layers. Matt just posted an answer demonstrating that you can do that. I hereby eat my words.
I've taking the code in Matt's answer and adapted it to a project which I've uploaded to Github (link.)
The effect Matt's animation creates is of a pair of feet walking up the screen. I found some open source feet and installed them in the project, and made some changes, but the basic approach is Matt's. Props to him.
Here is what the effect looks like:
(The statement below is incorrect)
No, you can't use a keyframe animation to animate multiple layers. A given CAAnimation can only act on a single layer. This includes group layers, by the way.
If all you're doing is things like moving images on a straight line, fading out, and fading in, why don't you use UIView animation? Take a look at the methods who's names start with animateWithDuration:animations: Those will let you create multiple animations at the same time, and the completion block can then trigger additional animations.
If you need to use layer animation for some reason, you can use the beginTime property (which CAAnimation objects have because they conform to the CAMediaTiming protocol.) For CAAnimations that are not part of an animation group, you use
animation.beginTime = CACurrentMediaTime() + delay;
Where delay is a double which expresses the delay in seconds.
If the delay is 0, the animation would begin.
A third option would be to set your view controller up as the delegate of the animation and use the animationDidStop:finished: method to chain your animations. This ends up being the messiest approach to implement, in my opinion.
The claim that a single animation group cannot animate properties of different layers is not true. It can. The technique is to attach the animation group to the superlayer and refer to the properties of the sublayers in the individual animations' key paths.
Here is a complete example just for demonstration purposes. When launched, this project displays two "footprints" that proceed to step in alternation, walking off the top of the screen.
class ViewController: UIViewController, CAAnimationDelegate {
let leftfoot = CALayer()
let rightfoot = CALayer()
override func viewDidLoad() {
super.viewDidLoad()
self.leftfoot.name = "left"
self.leftfoot.contents = UIImage(named:"leftfoot")!.cgImage
self.leftfoot.frame = CGRect(x: 100, y: 300, width: 50, height: 80)
self.view.layer.addSublayer(self.leftfoot)
self.rightfoot.name = "right"
self.rightfoot.contents = UIImage(named:"rightfoot")!.cgImage
self.rightfoot.frame = CGRect(x: 170, y: 300, width: 50, height: 80)
self.view.layer.addSublayer(self.rightfoot)
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
self.start()
}
}
func start() {
let firstLeftStep = CABasicAnimation(keyPath: "sublayers.left.position.y")
firstLeftStep.byValue = -80
firstLeftStep.duration = 1
firstLeftStep.fillMode = .forwards
func rightStepAfter(_ t: Double) -> CABasicAnimation {
let rightStep = CABasicAnimation(keyPath: "sublayers.right.position.y")
rightStep.byValue = -160
rightStep.beginTime = t
rightStep.duration = 2
rightStep.fillMode = .forwards
return rightStep
}
func leftStepAfter(_ t: Double) -> CABasicAnimation {
let leftStep = CABasicAnimation(keyPath: "sublayers.left.position.y")
leftStep.byValue = -160
leftStep.beginTime = t
leftStep.duration = 2
leftStep.fillMode = .forwards
return leftStep
}
let group = CAAnimationGroup()
group.duration = 11
group.animations = [firstLeftStep]
for i in stride(from: 1, through: 9, by: 4) {
group.animations?.append(rightStepAfter(Double(i)))
group.animations?.append(leftStepAfter(Double(i+2)))
}
group.delegate = self
self.view.layer.add(group, forKey: nil)
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
print("done")
self.rightfoot.removeFromSuperlayer()
self.leftfoot.removeFromSuperlayer()
}
}
Having said all that, I should add that if you are animating a core property like the position of something, it might be simpler to make it a view and use a UIView keyframe animation to coordinate animations on different views. Still, the point is that to say that this cannot be done with CAAnimationGroup is just wrong.