u10int / kinetic Goto Github PK
View Code? Open in Web Editor NEWA flexible tweening library for iOS in Swift similar to GSAP's TweenMax.
License: MIT License
A flexible tweening library for iOS in Swift similar to GSAP's TweenMax.
License: MIT License
would be nice to be able to tween the tintColor property of objects :)
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
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.
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
Maybe even a combination of the three. Looking forward to your solve. :)
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)
}
}
}
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.
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?
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
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
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!"
}
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?
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()
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 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?
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()
Hi u10int,
When applying tween to transformed(CGAffineTransform) views, animations not occurring and UIViews getting weird behaviour, please suggest solution for this.
Could you please add Sprite Kit support?
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
Please add @discardableResult (at least) to key functions (play/onComplete/onUpdate/setTotalProgress/...) to suppress the compiler warning.
thank you! :)
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
.Center(xVal, yVal) property doesn't exist in public enum Property
(despite documentation)
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()
}
On Tweenmax we have something like isTweening:Bool = true/false
is there something similar here? Would be really helpful.
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?
I'm having trouble importing via carthage. Is there something I'm doing wrong on my end?
the moment you use a .spring easing .Translate ignores duration and finishes very fast (without the spring animation)
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!
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?
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?
Type UIView does not conform to protocol 'Tweenable'
Type 'CALayer' does not conform to protocol 'Tweenable'
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.
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()
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)
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()
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.
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
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.
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
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.
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
.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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.