u10int / kinetic Goto Github PK

.Center(xVal, yVal) property doesn't exist in public enum Property
(despite documentation)

the moment you use a .spring easing .Translate ignores duration and finishes very fast (without the spring animation)

Hi!

Thanks again for your amazing animation library!
How would you animate an object using a bezierPath?
Basically a startPoint, endPoint and one anchor point.

Thanks,
Markus

Type UIView does not conform to protocol 'Tweenable'
Type 'CALayer' does not conform to protocol 'Tweenable'

This had me scratching my head for a bit.
The following code never triggers the onComplete handler:

let v = UIView()
view.addSubview(v)

Kinetic.to(v, duration: 0.1, options: [.BackgroundColor(UIColor.whiteColor())]).play().onComplete { anim in
      print("complete")
}

reason: backgroundColor property of the UIView is nil. Maybe add some check for that?

Following example

This is part of a complex timeline animation that reveals and hides elements:
timeline.add(Kinetic.fromTo(square, duration: 0.2, from:[.Alpha(0), .Scale(0.9)], to:[.Alpha(1), .Scale(1), .Translate(0,0)]), position: 0.5)

If you animate the timeline via a slider and setTotalProgress(sliderValue) then the alpha sometimes gets stuck on a very light value when you slide back to 0. Happens on random.

Same fix needed as with a .from animation:
Kinetic.fromTo(square, duration: 5.7, from: [.Translate(-80,0),.Rotate(-3)], to: [.Translate(0,0),.Rotate(0)]).ease(Easing.outSine).delay(0.6).play()

On Tweenmax we have something like isTweening:Bool = true/false is there something similar here? Would be really helpful.

When I use animateAll + stagger + delay the last elements in the chain don't get fully animated. the smaller the stagger value, the sooner the animation stops. Removing delay displays the animations at the end in full as expected.

doesn't work (5 elements):
Kinetic.animateAll(elements).from(.ScaleXY(0,0)).to(.ScaleXY(0.9,0.9)).duration(0.4).stagger(0.08).delay(0.3).play()

works (5 elements):
Kinetic.animateAll(elements).from(.ScaleXY(0,0)).to(.ScaleXY(0.9,0.9)).duration(0.4).stagger(0.08).play()

Let's say you have a little animation every time an event occurs and you want to reuse the timeline.
In this case, scale the button by 25% and then scale it back to 100%.

Right now I have to use this code:

var timeline= Timeline()
timeline.add(Kinetic.to(square, duration: 0.2, options: [ .Scale(1.25) ]).ease(Easing.inOutSine))
timeline.add(Kinetic.to(square, duration: 0.25, options: [ .Scale(0.8) ]).ease(Easing.inOutSine))

while with most other engines I specify absolute values like this:

var timeline= Timeline()
timeline.add(Kinetic.to(square, duration: 0.2, options: [ .Scale(1.25) ]).ease(Easing.inOutSine))
timeline.add(Kinetic.to(square, duration: 0.25, options: [ .Scale(1) ]).ease(Easing.inOutSine))

The current implementation makes it very very hard to use it for complex animations since you can't guarantee that the item looks exactly the same at the end.
Any way there could be an absolute mode?

the example states: var timeline = Timeline()
This won't work, you have to write Timeline(tweens: [])

If you create a tween, add it to a timeline and then play the timeline, the onComplete of the tween doesn't get called, only the one from the timeline is called.

see TransformViewController.swift

works:

let timeline = Kinetic.animateAll([greenSquare, blueSquare]).to(.RotateY(CGFloat(M_PI_2))).duration(1)
timeline.ease(Easing.inOutSine).perspective(1 / -1000).yoyo().repeatCount(3)
animation = timeline

doesn't work. rotateY becomes rotate.

let timeline = Kinetic.animateAll([greenSquare, blueSquare]).from(.RotateY(CGFloat(M_PI_2))).duration(1)
timeline.ease(Easing.inOutSine).perspective(1 / -1000).yoyo().repeatCount(3)
animation = timeline

Kinetic.set stopped working.

doesn't work:
Kinetic.set(self, props: .Rotate(0.25), .Scale(0.4))

works:
Kinetic.animate(self).duration(0).to(.Rotate(0.25), .Scale(0.4)).play()

While animating a UIView, user interaction is disabled. Could you please add an option to enable/disable user interaction while the animation is running (just like the UIViewAnimationOptions.allowUserInteraction option)?

The only way to get it done is to change TweenManager.swift line 90:

CATransaction.setDisableActions(false) // was true

I suggest adding the possiblity to change this without changing the pod itself.

Thank you

I noticed that antialiasing for rotation is not turned on.
After some research I stumbled over this post here:
http://stackoverflow.com/questions/8313804/antialiasing-edges-of-uiview-after-transformation-using-calayers-transform

I am not entirely sure what the best (practical) solve for this is

• a global switch
• a setting in the tween options to override a default on
• semi-automatic depending on object size/complexity

Maybe even a combination of the three. Looking forward to your solve. :)

Thanks for the great work , it works super great like I'm using ActionScript
but how can I install it manually without using pod ? cuz pod is not working on my current project
Thanks

Sometimes when setting up a Timeline with multiple transform animations, the transform values don't always animate when replaying the animation after the initial cycle. For instance:

let timeline = Timeline()
timeline.add(Kinetic.to(square, duration: 1, options: [ .Scale(1.5), .Translate(100,100) ]).ease(Easing.inOutSine))
        timeline.add(Kinetic.to(square, duration: 1, options: [ .Translate(0,100) ]).ease(Easing.inOutSine))
timeline.play()

This plays correctly for the initial cycle, but not any replay after that.

Could you please add Sprite Kit support?

Fantastic engine! Feels like home coming from TweenMax. 👍

I noticed a small bug when using .Alpha. When I fade in a view with .Alpha the animation sometimes gets stuck just below 1, leaving the background slightly transparent. Happens totally on random.

It would be great if there is a seekPercent(percent:Double) method for timeline.
Background: I coupled a slider to a timeline and want to scrub the timeline back and forth.

I tried to implement it via an extension, works great, but the getter for percent threw me a curve ball because totalTime/time()/progress() returns total elapsed time instead of the time position inside the timeline. e.g. the totalDuration is 0.9 but I am getting values > 200 for totalTime

extension Timeline {
    func seekPercent(percent: Double) -> Timeline {
        self.percent = percent
        return self
    }

    var percent : Double {
        get {
            guard totalDuration > 0 else { return 1 }
            return totalTime / totalDuration
        }
        set(value) {
            var checkValue = value > 1 ? 1 : value
            checkValue = checkValue < 0 ? 0 : checkValue
            seek(checkValue * totalDuration)
        }
    }
}

Im trying to run this example... but the second Interpolation sequence never gets called.

let duration = 5.0
let start = 0.2
let end = 0.9
        (start.interpolator(to: end, duration: duration*0.5, function: Easing.type(.sineIn)) { (value) in
            print("\(value)")
            if(value == 0.9){ //reverse
                (end.interpolator(to: start, duration: duration*0.5, function: Easing.type(.backIn)) { (value) in
                    print("\(value)")
                }).run()
            }
            
        }).run()

I clearly see the "0.9" printed in the console at the end of the animation. Any idea ?
0.834783264660673
0.843072425218097
0.851380677008584
0.859707158731858
0.868051016404468
0.876411403721092
0.884787482400993
0.89458297075934
0.9

Hi u10int,
When applying tween to transformed(CGAffineTransform) views, animations not occurring and UIViews getting weird behaviour, please suggest solution for this.

would be nice to be able to tween the tintColor property of objects :)

I like the new syntax because it made it seem more expandable and also that the order of parameters doesn't matter. Unfortunately it does (and broke all my migrated code).
Is this an easy fix?

works:
Kinetic.animate(square).to(.X(250)).duration(0.5).ease(Easing.inOutQuart).delay(1).play()

doesn't work:
Kinetic.animate(square).duration(0.5).to(.X(250)).ease(Easing.inOutQuart).delay(1).play()

I'm having trouble importing via carthage. Is there something I'm doing wrong on my end?

Kinetic.animate doesn't work on iOS 13 devices. I think that it is because of layout system in iOS 13 is different.

This was working on iOS 12 devices:
let tween = Kinetic.animate(swipeView).to(X(actionBackgroundImageView.frame.maxX), Y(actionBackgroundImageView.frame.origin.y), Size(100, 100)).duration(1.2).ease(Quartic.easeInOut)
tween.play()

This one was very hard to track down.
I have a Kinetic.from( ... ) animation in a UIViewControllerAnimatedTransitioning class.
Although the deinit method of the class is called at the end, Kinetic still keeps a reference to the animated view, preventing it from deinit.

If I call Kinetic.killTweensOf(playerVC.playerView) at the end of the class it works and the target removes itself from memory.

Probable workaround could be a .autoKill(). chain element.

If easing is used then the final value is not set under certain conditions.
The example below should output 0 at the end but instead the
output is -2.22044604925031e-16.

    var _testValue = 1.0
    var testValue : Double {
        get { return _testValue }
        set(value) {
            _testValue = value
            print(value)
        }
    }

override func viewDidAppear(animated: Bool) {
     Kinetic.to(self, duration: 0.3, options: [.KeyPath("testValue",0)]).ease(Easing.inOutSine).play()
}

Hi @u10int ,

How would you animate an object using easing like bounce, elastic and custom related eases in GreenSock?

Thanks for this animation library!

Thanks,
Saravana

Could you please include ZoomIn and ZoomOut in the property class of the Tweenable Objects. And also kindly give an option to handle the Tween while its running in the Timeline?

Stumbled over this one when I asked for video permissions.
After approving the system dialogue the following Kinetic animation didn't execute unless I ran it in a

dispatch_async(dispatch_get_main_queue()) {
     Kinetic.animate(self).duration(0.15).to(.Scale(0.85), .Alpha(0)).play()
}

code block.
Maybe add that code on default? Are there performance implications?

Please add @discardableResult (at least) to key functions (play/onComplete/onUpdate/setTotalProgress/...) to suppress the compiler warning.

thank you! :)

If I modify the example from the docs from

let timeline = Timeline()
timeline.add(Kinetic.to(square, duration: 1, options: [ .X(110) ]).ease(Easing.inOutCubic))
timeline.add(Kinetic.to(square, duration: 1, options: [ .Y(250) ]).ease(Easing.inOutCubic))
timeline.add(Kinetic.to(square, duration: 1, options: [ .Scale(2) ]).ease(Easing.inOutCubic))
timeline.play()

to

let timeline = Timeline()
timeline.add(Kinetic.to(square, duration: 1, options: [ .Rotate(-1) ]).ease(Easing.inOutCubic))
timeline.add(Kinetic.to(square, duration: 1, options: [ .Rotate(1) ]).ease(Easing.inOutCubic))
timeline.add(Kinetic.to(square, duration: 1, options: [ .Rotate(0) ]).ease(Easing.inOutCubic))
timeline.play()

the result is not as expected.

Running the following code:

Kinetic.fromTo(square, duration: 5.7, from: [.Rotate(-1),.Translate(-self.view.bounds.width-80,0)], to: [.Rotate(0),.Translate(0,0)]).ease(Easing.outSine).play()

ignores rotation and duration. Doesn't matter what rotation or duration I set, it's always the same animation

Hi!

can you please add borderColor to the list of animatable properties?
I tried to get strokeColor to work but it seems this property doesn't exist on an UIView/Layer?

Thank you! :)
Markus

Fantastic engine! Feels like home coming from TweenMax. 👍

I discovered a small bug. If you have a delay .from waits for the delay before it sets the .from values.
Example (sliding in a label):

Kinetic.from(title, duration: 1, options: [.X(-title.bounds.width)]).spring(tension: 70, friction: 15).delay(0.5).play()

Work around:

title.text = ""
Kinetic.from(title, duration: 1, options: [.X(-title.bounds.width)]).spring(tension: 70, friction: 15).delay(0.5).play().onStart { (tween) -> Void in
    self.title.text = "My Title!"
}

I have some UIViews inside a single ScrollView, but after they animate their y via Shift(y: somevalue) value and become larger than the ScrollView height, the scrollview doesn't scroll. Do I need to animate a specific y property? or update something?

.Frame would be a good to have animation target.
Not sure how concurrency is dealt with (e.g. .Frame in combination with .X).
Easiest solve could be that it is exclusive and has priority (and also stated in the docs).

Trying to tween a UITableView from bottom (set with PinLayout) to top of screen or even a set amount of y (100 or so) but it doesn't animate at all. The onComplete fires successfully after the duration.

Any ideas why this wouldn't work?

Add delay as a parameter for timeline adds (like position).
This opens the door to specify a negative delay, to start the animation before the previous one has ended. This kind of slight overlap (e.g. -0.2) is often the difference for an animation sequence between "ok" and "wow"

Delay parameter
instead of writing

anim.add(Kinetic.to(square, duration: 0.2, options: [ .Rotate(-1) ]).ease(Easing.outSine))
anim.add(Kinetic.to(square, duration: 0.4, options: [ .Rotate(1) ]).ease(Easing.inOutSine).delay(1))
anim.add(Kinetic.to(square, duration: 0.2, options: [ .Rotate(0) ]).ease(Easing.outSine))

you could also write

anim.add(Kinetic.to(square, duration: 0.2, options: [ .Rotate(-1) ]).ease(Easing.outSine))
anim.add(Kinetic.to(square, duration: 0.4, options: [ .Rotate(1) ]).ease(Easing.inOutSine), delay: 1)
anim.add(Kinetic.to(square, duration: 0.2, options: [ .Rotate(0) ]).ease(Easing.outSine))

but it shouldn't break

anim.add(Kinetic.to(square, duration: 0.2, options: [ .Rotate(-1) ]).ease(Easing.outSine))
anim.add(Kinetic.to(square, duration: 0.4, options: [ .Rotate(1) ]).ease(Easing.inOutSine).delay(0.5), delay: 0.5)
anim.add(Kinetic.to(square, duration: 0.2, options: [ .Rotate(0) ]).ease(Easing.outSine))

Negative delay parameter

anim.add(Kinetic.to(square, duration: 1, options: [ .Rotate(-1) ]).ease(Easing.outSine))
anim.add(Kinetic.to(square, duration: 0.3, options: [ .Alpha(0) ]), delay: -0.3)

You have a memory leak in your Tween module. It impacts TweenObjects and TransformProperties

I see the Swift 3 update is underway. Any luck get the pod to build properly?

I'd love to use this framework in my project. Thanks!