This is a quick and elegant tool for writing Android animations using DSL in Kotlin. The project is a DSL tool wrapped in Kotlin’s lambda expressions and extension functions. If you have some Kotlin background and like the elegance of DSLS, this project is a good learning experience.
What can it do?
When we write projects, it is essential that we often animate the components with transition animations so that they can interact with the user more vividly without being boring and disjointed. So what DSLAnimator can do is make it easier and clearer for you to write animations without having a lot of animation code confusing the rest of your business reading experience. Basically, we moved the XML configuration animation into the Kotlin code and made the process much more integrated. The only feature of DSLAnimator is that it makes Android animation development easier and clearer.
Use the compare
The traditional writing
The animation above increases the width and height of a button and has a gradient animation of color.
val width = ValueAnimator.ofInt(mButton.width, 500)
val widthParams = mButton.layoutParams
width.addUpdateListener {
widthParams.width = it.animatedValue as Int
mButton.layoutParams = widthParams
}
val height = ValueAnimator.ofInt(mButton.height, 500)
val heightParams = mButton.layoutParams
height.addUpdateListener {
heightParams.height = it.animatedValue as Int
mButton.layoutParams = heightParams
}
val color = ValueAnimator.ofFloat(0f, 1f)
color.addUpdateListener {
val value = it.animatedValue as Float
val color = ArgbEvaluator().evaluate(value,
Color.parseColor("#636978"),
Color.parseColor("#1AD372")) as Int
mButton.setBackgroundColor(color)
}
val set = AnimatorSet()
set.playTogether(width, height, color)
set.duration = 500
set.interpolator = OvershootInterpolator()
set.start()Copy the code
Use the DSL
With DSLS, you can see a lot less code and much clearer logic.
animSet {
widthAnim {
target = mButton
values = intArrayOf(mButton.width, 500)
}
heightAnim {
target = mButton
values = intArrayOf(mButton.height, 500)
}
colorAnim {
target = mButton
startColor = "#636978"
endColor = "#1AD372"
}
duration = 500
interpolator = OvershootInterpolator()
}.start()Copy the code
Two, how to use?
Add dependencies to build. Gradle
The compile 'com. LZP. Dslanimator: dslanimator: 1.0.2'Copy the code
2. Easy to use
1) Single animation
{target = mButton values = floatArrayOf(0f, 100f) duration = 500 interpolator = OvershootInterpolator() }.start()Copy the code
A single animation returns a NormalAnimator object that can be used to retrieve some state data or perform some operations on the animation, such as playing back the animation
2) Assemble animation
animSet { widthAnim { target = mButton values = intArrayOf(mButton.width, 500) } heightAnim { target = mButton values = intArrayOf(mButton.height, 500) } colorAnim { target = mButton startColor = "#636978" endColor = "#1AD372" } duration = 500 interpolator = OvershootInterpolator() onEnd {toast.maketext (this@MainActivity, "animation ends ", toast.length_long).show()}}.start()Copy the code
A single animation returns a Set object, similar to NormalAnimator.
3. Supported animation types
Currently only property animations are supported, and the following table lists the DSL node names corresponding to each property animation
The animation name | The node name |
---|---|
alpha | alphaAnim |
scaleX | scaleXAnim |
scaleY | scaleYAnim |
translationX | translationXAnim |
translationY | translationYAnim |
translationZ | translationZAnim |
rotation | rotationAnim |
rotationX | rotationXAnim |
rotationY | rotationYAnim |
width | widthAnim |
height | heightAnim |
color | colorAnim |
4. Supported configuration items
1) Single animation
Configuration items | describe |
---|---|
target | The View to be animated on |
values | The value of the animation to be moved is the same as the original property animation. Float to floatArray and int to intArray, such as floatArrayOf(0F, 100F) and intArrayOf(500). |
repeatCount | Same as normal property animation |
repeatMode | Same as normal property animation |
duration | The last time |
startDelay | How long to delay before the animation starts |
interpolator | interpolator |
startColor | Start color value, only colorAnim has this configuration item |
endColor | End of color value, only colorAnim has this configuration item |
onStart{} | The callback at the beginning of the animation |
onRepeat{} | The animation repeats the callback |
onCancel{} | The callback to which the animation was cancelled |
onEnd{} | The callback at the end of the animation |
onUpdate{} | During the animation run, the value is updated in the callback. The lambda also takes a callback to a ValueAnimator object. Variable values are available. |
2) Assemble animation
Configuration items | describe |
---|---|
duration | The last time |
startDelay | How long to delay before the animation starts |
interpolator | interpolator |
playMode | Set animation playback mode, two options. Play playmode. TOGETHER and playmode. SEQUENTIALLY, which is parallel by default. |
onStart{} | The callback at the beginning of the animation |
onRepeat{} | The animation repeats the callback |
onCancel{} | The callback to which the animation was cancelled |
onEnd{} | The callback at the end of the animation |
onUpdate{} | During the animation run, the value is updated in the callback. The lambda also takes a callback to a ValueAnimator object. Variable values are available. |
5. Contrast.
You can actually declare an animation at the head of the class with a lazy load. Then call it where you need it. This will not waste resources, keep the animation code out of the way and not interfere with business, and dynamically configure the value of the animation.
class MainActivity : AppCompatActivity() { private val anim by lazy { animSet { widthAnim { target = mButton values = intArrayOf(mButton.width, 500) } heightAnim { target = mButton values = intArrayOf(mButton.height, 500) } colorAnim { target = mButton startColor = "#636978" endColor = "#1AD372" } duration = 500 interpolator = OvershootInterpolator() } } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) mButton.setOnClickListener { anim.start() } }}Copy the code
Email:[email protected]
License Copyright 2017 liu zipeng
Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at
www.apache.org/licenses/LI…
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.