├── .gitignore ├── .idea ├── caches │ └── build_file_checksums.ser ├── codeStyles │ └── Project.xml ├── encodings.xml ├── gradle.xml ├── misc.xml ├── runConfigurations.xml └── vcs.xml ├── README.md ├── app ├── .gitignore ├── app-release.apk ├── build.gradle ├── proguard-rules.pro ├── release │ └── output.json └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── example │ │ └── cheng │ │ └── complexanimation │ │ └── ExampleInstrumentedTest.kt │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── example │ │ │ └── cheng │ │ │ └── complexanimation │ │ │ ├── MainActivity.kt │ │ │ ├── util │ │ │ └── Util.kt │ │ │ └── view │ │ │ ├── AnimationGroup.kt │ │ │ ├── AnimationInterface.kt │ │ │ ├── Band.kt │ │ │ ├── NavigationBarView.kt │ │ │ ├── RotateAnimationManager.kt │ │ │ └── TranslationAnimationManager.kt │ └── res │ │ ├── drawable-hdpi │ │ ├── p_1.png │ │ ├── p_2.png │ │ ├── p_3.png │ │ ├── p_4.png │ │ └── p_5.png │ │ ├── drawable-v24 │ │ └── ic_launcher_foreground.xml │ │ ├── drawable │ │ ├── circle_drawable.xml │ │ └── ic_launcher_background.xml │ │ ├── layout │ │ ├── activity_main.xml │ │ └── circle_animation.xml │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── colors.xml │ │ ├── strings.xml │ │ └── styles.xml │ └── test │ └── java │ └── com │ └── example │ └── cheng │ └── complexanimation │ └── ExampleUnitTest.kt ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── imitate.mp4 ├── pic ├── c_0.gif ├── c_1.gif ├── c_1.png ├── c_2.gif ├── c_2.png ├── c_3.gif ├── c_3.png ├── c_4.gif ├── c_4.png ├── c_5.gif ├── c_5.png └── c_6.png └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/libraries 5 | /.idea/modules.xml 6 | /.idea/workspace.xml 7 | .DS_Store 8 | /build 9 | /captures 10 | .externalNativeBuild 11 | -------------------------------------------------------------------------------- /.idea/caches/build_file_checksums.ser: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/.idea/caches/build_file_checksums.ser -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /.idea/gradle.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 27 | 28 | 29 | 30 | 31 | 32 | 34 | -------------------------------------------------------------------------------- /.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ComplexAnimation 2 | 一个复杂的动画效果（有个公司的面试考核） 3 | 4 | ### 仿写动图 5 |
6 | ### 实现的动图 7 |
8 | 9 | ### 实现步骤 10 | * 1.自定义ViewGroup，摆5个导航Button。
11 | * 下面的为部分代码，主要是为了说明流程，详细代码请看[NavigationBarView.kt](https://github.com/chengxiaobo2/ComplexAnimation/blob/master/app/src/main/java/com/example/cheng/complexanimation/view/NavigationBarView.kt)。 12 | ```java 13 | class NavigationBarView : ViewGroup { 14 | //5个View 15 | private val navigationButtonListView = ArrayList() 16 | 17 | //提供添加5个导航Button的方法 18 | fun addImageButtons(views: List) { 19 | for (i in 0 until views.size) { 20 | val frameLayout = FrameLayout(context) 21 | val view = views.get(i) 22 | super.addView(frameLayout) 23 | navigationButtonListView.add(frameLayout) 24 | frameLayout.addView(view) 25 | val params = view.layoutParams as FrameLayout.LayoutParams 26 | params.gravity = Gravity.CENTER 27 | frameLayout.setOnClickListener { 28 | if (currentIndex == i) { 29 | return@setOnClickListener 30 | } 31 | currentIndex = i 32 | Toast.makeText(context, i.toString(), Toast.LENGTH_SHORT).show() 33 | } 34 | } 35 | 36 | //layout 37 | override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { 38 | if (childCount <= 0) { 39 | return 40 | } 41 | for (i in 0 until navigationButtonListView.size) { 42 | val view = navigationButtonListView.get(i) 43 | view.layout(i * navigationButtonWidth, navigationTop, (i + 1) * navigationButtonWidth, navigationTop + navigationBottom) 44 | } 45 | } 46 | 47 | //记得measureChildren，因为我们继承的是ViewGroup 48 | override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { 49 | super.onMeasure(widthMeasureSpec, heightMeasureSpec) 50 | measureChildren(widthMeasureSpec, heightMeasureSpec) 51 | 52 | navigationWidth = MeasureSpec.getSize(widthMeasureSpec) 53 | setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), navigationHeight) 54 | } 55 | } 56 | ``` 57 | * 效果如下:
58 |
59 | * 2.实现球状View。 60 | * 2.1 自定义球状View 61 | AnimationGroup.kt 62 | ```java 63 | /** 64 | * 执行动画的View(上下左右移动+旋转) 65 | * 66 | * @author chengxiaobo 67 | * @time 2019/6/13 20:27 68 | */ 69 | class AnimationGroup : FrameLayout { 70 | 71 | constructor(context: Context?) : super(context) { 72 | init() 73 | } 74 | 75 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { 76 | init() 77 | } 78 | 79 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { 80 | init() 81 | } 82 | 83 | private fun init() { 84 | LayoutInflater.from(context).inflate(R.layout.circle_animation, this) 85 | } 86 | 87 | fun setImageResouce(resouce: Int) { 88 | animationView.setImageResource(resouce) 89 | } 90 | 91 | fun getAnimationView(): View { 92 | return animationView 93 | } 94 | } 95 | ``` 96 | * 2.2 摆放球状View 97 | NavigationBarView.kt 98 | ```java 99 | fun addImageButtons(views: List) { 100 | removeAllViews() 101 | animationGroup = AnimationGroup(context) 102 | animationGroup?.setImageResouce(R.drawable.p_1) 103 | ... ... 104 | } 105 | 106 | override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { 107 | animationGroup?.let { 108 | it.layout((navigationButtonWidth - it.measuredWidth) / 2, distanceTop, (navigationButtonWidth - it.measuredWidth) / 2 + it.measuredWidth, it.measuredHeight + distanceTop) 109 | } 110 | } 111 | ``` 112 |
113 | * 2.3 旋转动画 114 | ```java 115 | /** 116 | * 放大缩小动画 117 | * 118 | * @author chengxiaobo 119 | * @time 2019/6/13 17:52 120 | */ 121 | class RotateAnimationManager : AnimationInterface { 122 | 123 | var view: View? = null 124 | private var animator: ObjectAnimator? = null 125 | private var onAnimationUpdate: AnimationUpdate? = null 126 | 127 | 128 | override fun startAnimation() { 129 | view?.let { 130 | if (animator == null) { 131 | animator = ObjectAnimator.ofFloat(it, "rotation", 360.0f) 132 | } 133 | 134 | animator?.duration = 1000L 135 | animator?.start() 136 | animator?.addUpdateListener(object : ValueAnimator.AnimatorUpdateListener { 137 | override fun onAnimationUpdate(animation: ValueAnimator) { 138 | onAnimationUpdate?.onAnimationUpdate(animation.animatedFraction) 139 | } 140 | }) 141 | } 142 | } 143 | 144 | override fun stopAnimation() { 145 | view?.let { 146 | cancelAnimation() 147 | } 148 | } 149 | 150 | override fun cancelAnimation() { 151 | view?.let { 152 | animator?.cancel() 153 | it.scaleX = 1.0f 154 | it.scaleY = 1.0f 155 | } 156 | } 157 | 158 | override fun setAnimationUpdate(animationUpdate: AnimationUpdate) { 159 | this.onAnimationUpdate = animationUpdate 160 | } 161 | } 162 | ``` 163 |
164 | * 2.4 位移动画（如何实现呢？？？）
165 | * 2.4.1. 刚开始想的是，一个translationX的动画，和一个translationY的动画。比较难的一点是，因为有可能一次移动1个button的距离，也有可能移动2个button的距离。那么TranstionY的动画（向下加向上）什么时候开始执行就是一个麻烦事了。后来考虑用抛物线函数去实现,这样就不用考虑向上动画什么时候执行了。 166 | *
167 | ```java 168 | /** 169 | * 位移的动画 170 | * 171 | * @author chengxiaobo 172 | * @time 2019/6/14 4:14 173 | */ 174 | class TranslationAnimationManager(val startTranslateX: Float, val endTranslationX: Float, val startTranslateY: Float, val maxTranslationY: Float) : AnimationInterface { 175 | var view: View? = null 176 | private var animator: ValueAnimator? = null 177 | private var onAnimationUpdate: AnimationUpdate? = null 178 | 179 | 180 | override fun startAnimation() { 181 | view?.let { 182 | if (animator == null) { 183 | animator = ValueAnimator.ofFloat(0.0f, 1.0f) 184 | } 185 | 186 | animator?.duration = 1000L 187 | animator?.start() 188 | animator?.interpolator = LinearInterpolator() 189 | animator?.addUpdateListener { animation -> 190 | onAnimationUpdate?.onAnimationUpdate(animation.animatedFraction) 191 | val t = animation.animatedFraction 192 | //X方向为三角函数曲线的运动轨迹 193 | val translationX = (-0.5f * Math.cos(t * Math.PI).toFloat() + 0.5f) * (endTranslationX - startTranslateX) + startTranslateX 194 | 195 | val v0 = t * 2.0f - 1.0f 196 | //y方向为抛物线的运动轨迹 197 | val translationY = (-v0 * v0 + 1.0f) * (maxTranslationY - 0) 198 | 199 | it.translationX = translationX 200 | it.translationY = translationY 201 | } 202 | } 203 | } 204 | 205 | override fun stopAnimation() { 206 | view?.let { 207 | cancelAnimation() 208 | } 209 | } 210 | 211 | override fun cancelAnimation() { 212 | view?.let { 213 | animator?.cancel() 214 | } 215 | } 216 | 217 | override fun setAnimationUpdate(animationUpdate: AnimationUpdate) { 218 | this.onAnimationUpdate = animationUpdate 219 | } 220 | } 221 | ``` 222 | * 最终效果 223 | *
224 | * 3.根据小球的位置（小球的translationX的值），5个导航的Button要设置透明度，离小球比较近的button不显示，再远点的，透明度比较低，再远些显示。 225 | ```java 226 | translationAnimationManager?.setAnimationUpdate(object : AnimationUpdate { 227 | var p = 0.0f 228 | override fun onAnimationUpdate(precent: Float) { 229 | 230 | if (p < 0.5f && precent >= 0.5f) { 231 | it.setImageResouce(resouceList[i]) 232 | } else if (precent == 1.0f) { 233 | rotateAnimationManager.startAnimation() 234 | } 235 | p = precent 236 | 237 | // 根据transtionX的值，去设置5个View的透明度 238 | animationGroup?.let { 239 | val animationViewX = navigationButtonWidth / 2.0f + it.translationX 240 | 241 | for (i in 0 until navigationButtonListView.size) { 242 | val view = navigationButtonListView.get(i) 243 | val centerX = (view.left + view.right) / 2.0f 244 | val d = Math.abs(animationViewX - centerX) 245 | if (d <= navigationButtonWidth * 0.75f) { 246 | view.alpha = 0.0f 247 | } else if (d >= navigationButtonWidth * 1.0f) { 248 | view.alpha = 1.0f 249 | } else { 250 | view.alpha = (d - navigationButtonWidth * 0.75f) / (navigationButtonWidth * (1.0f - 0.75f)) 251 | } 252 | } 253 | } 254 | 255 | band?.setFractionAndX(it.translationY / maxTranslationY.toFloat(), it.translationX + (it.left + it.right) * 0.5f) 256 | } 257 | }) 258 | ``` 259 | * 最终效果 260 | *
261 | * 4.画凹形状（贝塞尔曲线实现）
262 | * 4.1 仔细观察要仿写的效果，发现凹形状是不一样的，当小球在上面的时候，凹的形状比较大，小球在下面的时候，凹的形状比较小。用程序的话就是说，凹的形状跟小球的translationY有关系。 263 | * 4.2 如何画白色的这个形状呢？分为7步
264 |
265 | * 4.3 最难的一点是如何画两条贝塞尔曲线，如下图，这两条贝塞尔曲线为三阶贝塞尔曲线，最关键的是求出2和3这两个控制点的坐标（根据centerX 以及 小球的translationY）去求。
266 |
267 | ```java 268 | /** 269 | * 画凹字形的曲线 270 | * @author guo 271 | */ 272 | class Band : View { 273 | 274 | 275 | internal var _fraction: Float = 0.toFloat() 276 | internal var _x: Float = 0.toFloat() 277 | 278 | var _curveWidth0 = 340.0f 279 | var _curveWidth1 = 180.0f 280 | var _curveDepth0 = 120.0f 281 | var _curveDepth1 = 75.0f 282 | var _curveControlA0 = 80.0f 283 | var _curveControlA1 = 40.0f 284 | var _curveControlB0 = 115.0f 285 | var _curveControlB1 = 50.0f 286 | 287 | internal var _paint = Paint() 288 | internal var _path = Path() 289 | 290 | constructor(context: Context?) : super(context) { 291 | init() 292 | } 293 | 294 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { 295 | init() 296 | } 297 | 298 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { 299 | init() 300 | } 301 | 302 | private fun init() { 303 | _curveWidth0 = getPx(context, 340.0f) 304 | _curveWidth1 = getPx(context, 180.0f) 305 | _curveDepth0 = getPx(context, 120.0f) 306 | _curveDepth1 = getPx(context, 75.0f) 307 | _curveControlA0 = getPx(context, 80.0f) 308 | _curveControlA1 = getPx(context, 40.0f) 309 | _curveControlB0 = getPx(context, 115.0f) 310 | _curveControlB1 = getPx(context, 50.0f) 311 | } 312 | 313 | fun setParams(width0: Float, width1: Float, depth0: Float, depth1: Float, controlA0: Float, controlA1: Float, controlB0: Float, controlB1: Float) { 314 | _curveWidth0 = width0 315 | _curveWidth1 = width1 316 | _curveDepth0 = depth0 317 | _curveDepth1 = depth1 318 | _curveControlA0 = controlA0 319 | _curveControlA1 = controlA1 320 | _curveControlB0 = controlB0 321 | _curveControlB1 = controlB1 322 | } 323 | 324 | /** 325 | * 根据球的上下位置，画贝塞尔曲线。仔细观察移动的过程中 凹的形状是不一样的 326 | * 球在上面的时候凹形大，球在下面的时候凹形状小 327 | */ 328 | fun setFractionAndX(fraction: Float, x: Float) { 329 | _fraction = fraction 330 | _x = x 331 | invalidate() 332 | } 333 | 334 | override fun onDraw(canvas: Canvas) { 335 | _path.reset() 336 | 337 | val width = _curveWidth0 + _fraction * (_curveWidth1 - _curveWidth0) 338 | val depth = _curveDepth0 + _fraction * (_curveDepth1 - _curveDepth0) 339 | val controlA = _curveControlA0 + _fraction * (_curveControlA1 - _curveControlA0) 340 | val controlB = _curveControlB0 + _fraction * (_curveControlB1 - _curveControlB0) 341 | 342 | val cl = _x - width * 0.5f 343 | val cr = _x + width * 0.5f 344 | 345 | val left = Math.min(cl, 0.0f) 346 | val right = Math.max(cr, getWidth().toFloat()) 347 | val bottom = height.toFloat() 348 | 349 | _path.moveTo(cl, 0.0f) 350 | _path.cubicTo(cl + controlA, 0.0f, _x - controlB, depth, _x, depth) 351 | _path.cubicTo(_x + controlB, depth, cr - controlA, 0.0f, cr, 0.0f) 352 | if (right != cr) { 353 | _path.lineTo(right, 0.0f) 354 | } 355 | _path.lineTo(right, bottom) 356 | _path.lineTo(left, bottom) 357 | _path.lineTo(left, 0.0f) 358 | if (left != cl) { 359 | _path.lineTo(cl, 0.0f) 360 | } 361 | 362 | canvas.drawPath(_path, _paint) 363 | } 364 | 365 | init { 366 | _paint.color = -0x1 367 | _paint.style = Paint.Style.FILL 368 | } 369 | } 370 | ``` 371 | * 4.4 简单分析一下上面的代码 372 | ```java 373 | var _curveWidth0 = 340.0f //曲线最大的宽度 374 | var _curveWidth1 = 180.0f //曲线最小的宽度 375 | var _curveDepth0 = 120.0f //曲线最大的深度 376 | var _curveDepth1 = 75.0f //曲线最小的深度 377 | var _curveControlA0 = 80.0f //如下图，2最大X值 378 | var _curveControlA1 = 40.0f //如下图，2最小X值 379 | var _curveControlB0 = 115.0f //如下图，3最大X绝对值 380 | var _curveControlB1 = 50.0f //如下图，3最小绝对值 381 | 382 | val width = _curveWidth0 + _fraction * (_curveWidth1 - _curveWidth0) 383 | val depth = _curveDepth0 + _fraction * (_curveDepth1 - _curveDepth0) 384 | val controlA = _curveControlA0 + _fraction * (_curveControlA1 - _curveControlA0) 385 | val controlB = _curveControlB0 + _fraction * (_curveControlB1 - _curveControlB0) 386 | 387 | ``` 388 | 都会根据小球的translationY/maxTranslationY=fraction 根据fraction的值来计算出，贝塞尔曲线的两个控制点的值，这样的话，就能实现，当小球在上面的时候，凹的形状比较大，小球在下面的时候，凹的形状比较小的效果了。
389 |
390 | * 最终效果
391 |
392 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/app-release.apk: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/app-release.apk -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | apply plugin: 'kotlin-android' 4 | 5 | apply plugin: 'kotlin-android-extensions' 6 | 7 | android { 8 | compileSdkVersion 28 9 | defaultConfig { 10 | applicationId "com.example.cheng.complexanimation" 11 | minSdkVersion 21 12 | targetSdkVersion 28 13 | versionCode 1 14 | versionName "1.0" 15 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 16 | } 17 | buildTypes { 18 | release { 19 | minifyEnabled false 20 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 21 | } 22 | } 23 | } 24 | 25 | dependencies { 26 | implementation fileTree(dir: 'libs', include: ['*.jar']) 27 | implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" 28 | implementation 'com.android.support:appcompat-v7:28.0.0' 29 | implementation 'com.android.support.constraint:constraint-layout:1.1.3' 30 | testImplementation 'junit:junit:4.12' 31 | androidTestImplementation 'com.android.support.test:runner:1.0.2' 32 | androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' 33 | } 34 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # You can control the set of applied configuration files using the 3 | # proguardFiles setting in build.gradle. 4 | # 5 | # For more details, see 6 | # http://developer.android.com/guide/developing/tools/proguard.html 7 | 8 | # If your project uses WebView with JS, uncomment the following 9 | # and specify the fully qualified class name to the JavaScript interface 10 | # class: 11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 12 | # public *; 13 | #} 14 | 15 | # Uncomment this to preserve the line number information for 16 | # debugging stack traces. 17 | #-keepattributes SourceFile,LineNumberTable 18 | 19 | # If you keep the line number information, uncomment this to 20 | # hide the original source file name. 21 | #-renamesourcefileattribute SourceFile 22 | -------------------------------------------------------------------------------- /app/release/output.json: -------------------------------------------------------------------------------- 1 | [{"outputType":{"type":"APK"},"apkInfo":{"type":"MAIN","splits":[],"versionCode":1,"versionName":"1.0","enabled":true,"outputFile":"app-release.apk","fullName":"release","baseName":"release"},"path":"app-release.apk","properties":{}}] -------------------------------------------------------------------------------- /app/src/androidTest/java/com/example/cheng/complexanimation/ExampleInstrumentedTest.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation 2 | 3 | import android.support.test.InstrumentationRegistry 4 | import android.support.test.runner.AndroidJUnit4 5 | 6 | import org.junit.Test 7 | import org.junit.runner.RunWith 8 | 9 | import org.junit.Assert.* 10 | 11 | /** 12 | * Instrumented test, which will execute on an Android device. 13 | * 14 | * See [testing documentation](http://d.android.com/tools/testing). 15 | */ 16 | @RunWith(AndroidJUnit4::class) 17 | class ExampleInstrumentedTest { 18 | @Test 19 | fun useAppContext() { 20 | // Context of the app under test. 21 | val appContext = InstrumentationRegistry.getTargetContext() 22 | assertEquals("com.example.cheng.complexanimation", appContext.packageName) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation 2 | 3 | import android.support.v7.app.AppCompatActivity 4 | import android.os.Bundle 5 | import android.view.ViewGroup 6 | import android.widget.ImageView 7 | import com.example.cheng.complexanimation.util.dp2Px 8 | import kotlinx.android.synthetic.main.activity_main.* 9 | 10 | class MainActivity : AppCompatActivity() { 11 | 12 | override fun onCreate(savedInstanceState: Bundle?) { 13 | super.onCreate(savedInstanceState) 14 | setContentView(R.layout.activity_main) 15 | 16 | val resouceList = arrayOf(R.drawable.p_1, R.drawable.p_2, R.drawable.p_3, R.drawable.p_4, R.drawable.p_5) 17 | val list = ArrayList() 18 | for (i in 0..4) { 19 | val iv = ImageView(this) 20 | iv.setImageResource(resouceList[i]) 21 | iv.layoutParams = ViewGroup.LayoutParams(dp2Px(this, 40.0f), dp2Px(this, 40.0f)) 22 | list.add(iv) 23 | } 24 | navigationBarView.addImageButtons(list) 25 | 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/util/Util.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.util 2 | 3 | import android.content.Context 4 | 5 | 6 | /** 7 | * 8 | * @author chengxiaobo 9 | * @time 2019/6/13 9:46 10 | */ 11 | // px dp 互转 12 | fun dp2Px(context: Context, dp: Float): Int { 13 | val scale = context.resources.displayMetrics.density 14 | return (dp * scale + 0.5f).toInt() 15 | } 16 | 17 | fun getPx(context: Context, px1080: Float): Float { 18 | val screenWidth = context.resources.displayMetrics.widthPixels 19 | return screenWidth * px1080 / 1080 20 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/view/AnimationGroup.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.view 2 | 3 | import android.content.Context 4 | import android.util.AttributeSet 5 | import android.view.LayoutInflater 6 | import android.view.View 7 | import android.widget.FrameLayout 8 | import com.example.cheng.complexanimation.R 9 | import kotlinx.android.synthetic.main.circle_animation.view.* 10 | 11 | 12 | /** 13 | * 执行动画的View(上下左右移动+旋转) 14 | * 15 | * @author chengxiaobo 16 | * @time 2019/6/13 20:27 17 | */ 18 | class AnimationGroup : FrameLayout { 19 | 20 | constructor(context: Context?) : super(context) { 21 | init() 22 | } 23 | 24 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { 25 | init() 26 | } 27 | 28 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { 29 | init() 30 | } 31 | 32 | private fun init() { 33 | LayoutInflater.from(context).inflate(R.layout.circle_animation, this) 34 | } 35 | 36 | fun setImageResouce(resouce: Int) { 37 | animationView.setImageResource(resouce) 38 | } 39 | 40 | fun getAnimationView(): View { 41 | return animationView 42 | } 43 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/view/AnimationInterface.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.view 2 | 3 | 4 | /** 5 | * 执行动画的接口 6 | * 7 | * @author chengxiaobo 8 | * @time 2019/6/13 17:52 9 | */ 10 | interface AnimationInterface { 11 | fun startAnimation() 12 | fun stopAnimation() 13 | fun cancelAnimation() 14 | fun setAnimationUpdate(animationUpdate: AnimationUpdate) 15 | 16 | } 17 | 18 | interface AnimationUpdate { 19 | fun onAnimationUpdate(precent: Float) 20 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/view/Band.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.view 2 | 3 | import android.content.Context 4 | import android.graphics.Canvas 5 | import android.graphics.Paint 6 | import android.graphics.Path 7 | import android.util.AttributeSet 8 | import android.view.View 9 | import com.example.cheng.complexanimation.util.getPx 10 | 11 | /** 12 | * 画凹字形的曲线 13 | */ 14 | class Band : View { 15 | 16 | 17 | internal var _fraction: Float = 0.toFloat() 18 | internal var _x: Float = 0.toFloat() 19 | 20 | var _curveWidth0 = 340.0f 21 | var _curveWidth1 = 180.0f 22 | var _curveDepth0 = 120.0f 23 | var _curveDepth1 = 75.0f 24 | var _curveControlA0 = 80.0f 25 | var _curveControlA1 = 40.0f 26 | var _curveControlB0 = 115.0f 27 | var _curveControlB1 = 50.0f 28 | 29 | internal var _paint = Paint(Paint.ANTI_ALIAS_FLAG) 30 | internal var _path = Path() 31 | 32 | constructor(context: Context?) : super(context) { 33 | init() 34 | } 35 | 36 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { 37 | init() 38 | } 39 | 40 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { 41 | init() 42 | } 43 | 44 | private fun init() { 45 | _curveWidth0 = getPx(context, 340.0f) 46 | _curveWidth1 = getPx(context, 180.0f) 47 | _curveDepth0 = getPx(context, 120.0f) 48 | _curveDepth1 = getPx(context, 75.0f) 49 | _curveControlA0 = getPx(context, 80.0f) 50 | _curveControlA1 = getPx(context, 40.0f) 51 | _curveControlB0 = getPx(context, 115.0f) 52 | _curveControlB1 = getPx(context, 50.0f) 53 | } 54 | 55 | fun setParams(width0: Float, width1: Float, depth0: Float, depth1: Float, controlA0: Float, controlA1: Float, controlB0: Float, controlB1: Float) { 56 | _curveWidth0 = width0 57 | _curveWidth1 = width1 58 | _curveDepth0 = depth0 59 | _curveDepth1 = depth1 60 | _curveControlA0 = controlA0 61 | _curveControlA1 = controlA1 62 | _curveControlB0 = controlB0 63 | _curveControlB1 = controlB1 64 | } 65 | 66 | /** 67 | * 根据球的上下位置，画贝塞尔曲线。仔细观察移动的过程中 凹的形状是不一样的 68 | * 球在上面的时候凹形大，球在下面的时候凹形状小 69 | */ 70 | fun setFractionAndX(fraction: Float, x: Float) { 71 | _fraction = fraction 72 | _x = x 73 | invalidate() 74 | } 75 | 76 | override fun onDraw(canvas: Canvas) { 77 | _path.reset() 78 | 79 | val width = _curveWidth0 + _fraction * (_curveWidth1 - _curveWidth0) 80 | val depth = _curveDepth0 + _fraction * (_curveDepth1 - _curveDepth0) 81 | val controlA = _curveControlA0 + _fraction * (_curveControlA1 - _curveControlA0) 82 | val controlB = _curveControlB0 + _fraction * (_curveControlB1 - _curveControlB0) 83 | 84 | val cl = _x - width * 0.5f 85 | val cr = _x + width * 0.5f 86 | 87 | val left = Math.min(cl, 0.0f) 88 | val right = Math.max(cr, getWidth().toFloat()) 89 | val bottom = height.toFloat() 90 | 91 | _path.moveTo(cl, 0.0f) 92 | _path.cubicTo(cl + controlA, 0.0f, _x - controlB, depth, _x, depth) 93 | _path.cubicTo(_x + controlB, depth, cr - controlA, 0.0f, cr, 0.0f) 94 | if (right != cr) { 95 | _path.lineTo(right, 0.0f) 96 | } 97 | _path.lineTo(right, bottom) 98 | _path.lineTo(left, bottom) 99 | _path.lineTo(left, 0.0f) 100 | if (left != cl) { 101 | _path.lineTo(cl, 0.0f) 102 | } 103 | 104 | canvas.drawPath(_path, _paint) 105 | } 106 | 107 | init { 108 | _paint.color = -0x1 109 | _paint.style = Paint.Style.FILL 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/view/NavigationBarView.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.view 2 | 3 | import android.content.Context 4 | import android.util.AttributeSet 5 | import android.view.Gravity 6 | import android.view.View 7 | import android.view.ViewGroup 8 | import android.widget.FrameLayout 9 | import android.widget.Toast 10 | import com.example.cheng.complexanimation.R 11 | import com.example.cheng.complexanimation.util.dp2Px 12 | 13 | 14 | /** 15 | * 导航条 16 | * 17 | * @author chengxiaobo 18 | * @time 2019/6/13 9:29 19 | */ 20 | class NavigationBarView : ViewGroup { 21 | 22 | //导航底部的高度 23 | private var navigationBottom = 0 24 | //导航上部的高度 25 | private var navigationTop = 0 26 | //导航的总高度 27 | private var navigationHeight = 0 28 | 29 | //导航的总宽度 30 | private var navigationWidth = 0 31 | //导航某一项的宽度 32 | private var navigationButtonWidth = 0 33 | //小球距离顶部的距离 34 | private var distanceTop = 0 35 | //小球最大向下的距离 36 | private var maxTranslationY = 0 37 | //当前选中的是第几项 38 | private var currentIndex = -1 39 | 40 | //动画动画（上下左右+旋转）View 41 | private var animationGroup: AnimationGroup? = null 42 | //贝塞尔曲线View 43 | private var band: Band? = null 44 | //5个View 45 | private val navigationButtonListView = ArrayList() 46 | 47 | //旋转动画 48 | private val rotateAnimationManager: RotateAnimationManager by lazy { 49 | RotateAnimationManager() 50 | } 51 | //位移动画 52 | private var translationAnimationManager: TranslationAnimationManager? = null 53 | 54 | //资源 55 | val resouceList = arrayOf(R.drawable.p_1, R.drawable.p_2, R.drawable.p_3, R.drawable.p_4, R.drawable.p_5) 56 | 57 | constructor(context: Context?) : super(context) { 58 | init() 59 | } 60 | 61 | constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) { 62 | init() 63 | } 64 | 65 | constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { 66 | init() 67 | } 68 | 69 | fun init() { 70 | navigationBottom = dp2Px(context, 50.0f) 71 | navigationTop = dp2Px(context, 30.0f) 72 | distanceTop = dp2Px(context, 10.0f) 73 | maxTranslationY = dp2Px(context, 45.0f) 74 | navigationHeight = navigationBottom + navigationTop 75 | } 76 | 77 | override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { 78 | super.onMeasure(widthMeasureSpec, heightMeasureSpec) 79 | measureChildren(widthMeasureSpec, heightMeasureSpec) 80 | 81 | navigationWidth = MeasureSpec.getSize(widthMeasureSpec) 82 | setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), navigationHeight) 83 | } 84 | 85 | fun addImageButtons(views: List) { 86 | removeAllViews() 87 | animationGroup = AnimationGroup(context) 88 | animationGroup?.setImageResouce(R.drawable.p_1) 89 | rotateAnimationManager.view = animationGroup?.getAnimationView() 90 | animationGroup?.let { 91 | super.addView(it) 92 | } 93 | 94 | band = Band(context) 95 | band?.let { 96 | super.addView(it) 97 | it.post { 98 | it.setFractionAndX(0.0f, (animationGroup!!.left + animationGroup!!.right) / 2.0f) 99 | } 100 | 101 | } 102 | 103 | 104 | for (i in 0 until views.size) { 105 | val frameLayout = FrameLayout(context) 106 | val view = views.get(i) 107 | super.addView(frameLayout) 108 | navigationButtonListView.add(frameLayout) 109 | frameLayout.addView(view) 110 | val params = view.layoutParams as FrameLayout.LayoutParams 111 | params.gravity = Gravity.CENTER 112 | 113 | if (i == 0) { 114 | frameLayout.alpha = 0.0f 115 | } 116 | frameLayout.setOnClickListener { 117 | if (currentIndex == i) { 118 | return@setOnClickListener 119 | } 120 | 121 | animationGroup?.let { 122 | translationAnimationManager = TranslationAnimationManager(it.translationX, navigationButtonWidth * i.toFloat(), it.translationY, maxTranslationY.toFloat()) 123 | translationAnimationManager?.view = animationGroup 124 | translationAnimationManager?.setAnimationUpdate(object : AnimationUpdate { 125 | var p = 0.0f 126 | override fun onAnimationUpdate(precent: Float) { 127 | 128 | if (p < 0.5f && precent >= 0.5f) { 129 | it.setImageResouce(resouceList[i]) 130 | } else if (precent == 1.0f) { 131 | rotateAnimationManager.startAnimation() 132 | } 133 | p = precent 134 | 135 | //根据transtionX的值，去设置5个View的透明度 136 | animationGroup?.let { 137 | val animationViewX = navigationButtonWidth / 2.0f + it.translationX 138 | 139 | for (i in 0 until navigationButtonListView.size) { 140 | val view = navigationButtonListView.get(i) 141 | val centerX = (view.left + view.right) / 2.0f 142 | val d = Math.abs(animationViewX - centerX) 143 | if (d <= navigationButtonWidth * 0.75f) { 144 | view.alpha = 0.0f 145 | } else if (d >= navigationButtonWidth * 1.0f) { 146 | view.alpha = 1.0f 147 | } else { 148 | view.alpha = (d - navigationButtonWidth * 0.75f) / (navigationButtonWidth * (1.0f - 0.75f)) 149 | } 150 | } 151 | } 152 | 153 | band?.setFractionAndX(it.translationY / maxTranslationY.toFloat(), it.translationX + (it.left + it.right) * 0.5f) 154 | } 155 | }) 156 | translationAnimationManager?.startAnimation() 157 | } 158 | currentIndex = i 159 | Toast.makeText(context, i.toString(), Toast.LENGTH_SHORT).show() 160 | } 161 | } 162 | requestLayout() 163 | 164 | } 165 | 166 | override fun addView(child: View?) { 167 | 168 | } 169 | 170 | override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) { 171 | if (childCount <= 0) { 172 | return 173 | } 174 | 175 | if (navigationButtonListView.size > 0) { 176 | navigationButtonWidth = navigationWidth / (navigationButtonListView.size) 177 | } 178 | 179 | for (i in 0 until navigationButtonListView.size) { 180 | val view = navigationButtonListView.get(i) 181 | view.layout(i * navigationButtonWidth, navigationTop, (i + 1) * navigationButtonWidth, navigationTop + navigationBottom) 182 | } 183 | 184 | animationGroup?.let { 185 | it.layout((navigationButtonWidth - it.measuredWidth) / 2, distanceTop, (navigationButtonWidth - it.measuredWidth) / 2 + it.measuredWidth, it.measuredHeight + distanceTop) 186 | } 187 | 188 | band?.let { 189 | it.layout(0, navigationTop, this.measuredWidth, this.measuredHeight) 190 | } 191 | } 192 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/view/RotateAnimationManager.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.view 2 | 3 | import android.animation.ObjectAnimator 4 | import android.animation.ValueAnimator 5 | import android.view.View 6 | 7 | /** 8 | * 放大缩小动画 9 | * 10 | * @author chengxiaobo 11 | * @time 2019/6/13 17:52 12 | */ 13 | class RotateAnimationManager : AnimationInterface { 14 | 15 | var view: View? = null 16 | private var animator: ObjectAnimator? = null 17 | private var onAnimationUpdate: AnimationUpdate? = null 18 | 19 | 20 | override fun startAnimation() { 21 | view?.let { 22 | if (animator == null) { 23 | animator = ObjectAnimator.ofFloat(it, "rotation", 360.0f) 24 | } 25 | 26 | animator?.duration = 333L 27 | animator?.start() 28 | animator?.addUpdateListener(object : ValueAnimator.AnimatorUpdateListener { 29 | override fun onAnimationUpdate(animation: ValueAnimator) { 30 | onAnimationUpdate?.onAnimationUpdate(animation.animatedFraction) 31 | } 32 | }) 33 | } 34 | } 35 | 36 | override fun stopAnimation() { 37 | view?.let { 38 | cancelAnimation() 39 | } 40 | } 41 | 42 | override fun cancelAnimation() { 43 | view?.let { 44 | animator?.cancel() 45 | it.scaleX = 1.0f 46 | it.scaleY = 1.0f 47 | } 48 | } 49 | 50 | override fun setAnimationUpdate(animationUpdate: AnimationUpdate) { 51 | this.onAnimationUpdate = animationUpdate 52 | } 53 | } -------------------------------------------------------------------------------- /app/src/main/java/com/example/cheng/complexanimation/view/TranslationAnimationManager.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation.view 2 | 3 | import android.animation.ValueAnimator 4 | import android.view.View 5 | import android.view.animation.LinearInterpolator 6 | 7 | 8 | /** 9 | * 位移的动画 10 | * 11 | * @author chengxiaobo 12 | * @time 2019/6/14 4:14 13 | */ 14 | class TranslationAnimationManager(val startTranslateX: Float, val endTranslationX: Float, val startTranslateY: Float, val maxTranslationY: Float) : AnimationInterface { 15 | var view: View? = null 16 | private var animator: ValueAnimator? = null 17 | private var onAnimationUpdate: AnimationUpdate? = null 18 | 19 | 20 | override fun startAnimation() { 21 | view?.let { 22 | if (animator == null) { 23 | animator = ValueAnimator.ofFloat(0.0f, 1.0f) 24 | } 25 | 26 | animator?.duration = 333L 27 | animator?.start() 28 | animator?.interpolator = LinearInterpolator() 29 | animator?.addUpdateListener { animation -> 30 | onAnimationUpdate?.onAnimationUpdate(animation.animatedFraction) 31 | val t = animation.animatedFraction 32 | //X方向为三角函数曲线的运动轨迹 33 | val translationX = (-0.5f * Math.cos(t * Math.PI).toFloat() + 0.5f) * (endTranslationX - startTranslateX) + startTranslateX 34 | 35 | val v0 = t * 2.0f - 1.0f 36 | //y方向为抛物线的运动轨迹 37 | val translationY = (-v0 * v0 + 1.0f) * (maxTranslationY - 0) 38 | 39 | it.translationX = translationX 40 | it.translationY = translationY 41 | } 42 | } 43 | } 44 | 45 | override fun stopAnimation() { 46 | view?.let { 47 | cancelAnimation() 48 | } 49 | } 50 | 51 | override fun cancelAnimation() { 52 | view?.let { 53 | animator?.cancel() 54 | } 55 | } 56 | 57 | override fun setAnimationUpdate(animationUpdate: AnimationUpdate) { 58 | this.onAnimationUpdate = animationUpdate 59 | } 60 | } -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/p_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/drawable-hdpi/p_1.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/p_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/drawable-hdpi/p_2.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/p_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/drawable-hdpi/p_3.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/p_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/drawable-hdpi/p_4.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-hdpi/p_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/drawable-hdpi/p_5.png -------------------------------------------------------------------------------- /app/src/main/res/drawable-v24/ic_launcher_foreground.xml: -------------------------------------------------------------------------------- 1 | 7 | 12 | 13 | 19 | 22 | 25 | 26 | 27 | 28 | 34 | 35 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/circle_drawable.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /app/src/main/res/drawable/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 110 | 115 | 120 | 125 | 130 | 135 | 140 | 145 | 150 | 155 | 160 | 165 | 170 | 171 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 17 | 18 | -------------------------------------------------------------------------------- /app/src/main/res/layout/circle_animation.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3F51B5 4 | #303F9F 5 | #FF4081 6 | 7 | -------------------------------------------------------------------------------- /app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | ComplexAnimation 3 | 4 | -------------------------------------------------------------------------------- /app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /app/src/test/java/com/example/cheng/complexanimation/ExampleUnitTest.kt: -------------------------------------------------------------------------------- 1 | package com.example.cheng.complexanimation 2 | 3 | import org.junit.Test 4 | 5 | import org.junit.Assert.* 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * See [testing documentation](http://d.android.com/tools/testing). 11 | */ 12 | class ExampleUnitTest { 13 | @Test 14 | fun addition_isCorrect() { 15 | assertEquals(4, 2 + 2) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext.kotlin_version = '1.2.50' 5 | repositories { 6 | google() 7 | jcenter() 8 | } 9 | dependencies { 10 | classpath 'com.android.tools.build:gradle:3.1.3' 11 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 12 | 13 | // NOTE: Do not place your application dependencies here; they belong 14 | // in the individual module build.gradle files 15 | } 16 | } 17 | 18 | allprojects { 19 | repositories { 20 | google() 21 | jcenter() 22 | } 23 | } 24 | 25 | task clean(type: Delete) { 26 | delete rootProject.buildDir 27 | } 28 | -------------------------------------------------------------------------------- /gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | # IDE (e.g. Android Studio) users: 3 | # Gradle settings configured through the IDE *will override* 4 | # any settings specified in this file. 5 | # For more details on how to configure your build environment visit 6 | # http://www.gradle.org/docs/current/userguide/build_environment.html 7 | # Specifies the JVM arguments used for the daemon process. 8 | # The setting is particularly useful for tweaking memory settings. 9 | org.gradle.jvmargs=-Xmx1536m 10 | # When configured, Gradle will run in incubating parallel mode. 11 | # This option should only be used with decoupled projects. More details, visit 12 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 13 | # org.gradle.parallel=true 14 | -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Wed Jun 12 20:12:07 CST 2019 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip 7 | -------------------------------------------------------------------------------- /gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Attempt to set APP_HOME 10 | # Resolve links: $0 may be a link 11 | PRG="$0" 12 | # Need this for relative symlinks. 13 | while [ -h "$PRG" ] ; do 14 | ls=`ls -ld "$PRG"` 15 | link=`expr "$ls" : '.*-> \(.*\)$'` 16 | if expr "$link" : '/.*' > /dev/null; then 17 | PRG="$link" 18 | else 19 | PRG=`dirname "$PRG"`"/$link" 20 | fi 21 | done 22 | SAVED="`pwd`" 23 | cd "`dirname \"$PRG\"`/" >/dev/null 24 | APP_HOME="`pwd -P`" 25 | cd "$SAVED" >/dev/null 26 | 27 | APP_NAME="Gradle" 28 | APP_BASE_NAME=`basename "$0"` 29 | 30 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 31 | DEFAULT_JVM_OPTS="" 32 | 33 | # Use the maximum available, or set MAX_FD != -1 to use that value. 34 | MAX_FD="maximum" 35 | 36 | warn () { 37 | echo "$*" 38 | } 39 | 40 | die () { 41 | echo 42 | echo "$*" 43 | echo 44 | exit 1 45 | } 46 | 47 | # OS specific support (must be 'true' or 'false'). 48 | cygwin=false 49 | msys=false 50 | darwin=false 51 | nonstop=false 52 | case "`uname`" in 53 | CYGWIN* ) 54 | cygwin=true 55 | ;; 56 | Darwin* ) 57 | darwin=true 58 | ;; 59 | MINGW* ) 60 | msys=true 61 | ;; 62 | NONSTOP* ) 63 | nonstop=true 64 | ;; 65 | esac 66 | 67 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 68 | 69 | # Determine the Java command to use to start the JVM. 70 | if [ -n "$JAVA_HOME" ] ; then 71 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 72 | # IBM's JDK on AIX uses strange locations for the executables 73 | JAVACMD="$JAVA_HOME/jre/sh/java" 74 | else 75 | JAVACMD="$JAVA_HOME/bin/java" 76 | fi 77 | if [ ! -x "$JAVACMD" ] ; then 78 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 79 | 80 | Please set the JAVA_HOME variable in your environment to match the 81 | location of your Java installation." 82 | fi 83 | else 84 | JAVACMD="java" 85 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 86 | 87 | Please set the JAVA_HOME variable in your environment to match the 88 | location of your Java installation." 89 | fi 90 | 91 | # Increase the maximum file descriptors if we can. 92 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 93 | MAX_FD_LIMIT=`ulimit -H -n` 94 | if [ $? -eq 0 ] ; then 95 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 96 | MAX_FD="$MAX_FD_LIMIT" 97 | fi 98 | ulimit -n $MAX_FD 99 | if [ $? -ne 0 ] ; then 100 | warn "Could not set maximum file descriptor limit: $MAX_FD" 101 | fi 102 | else 103 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 104 | fi 105 | fi 106 | 107 | # For Darwin, add options to specify how the application appears in the dock 108 | if $darwin; then 109 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 110 | fi 111 | 112 | # For Cygwin, switch paths to Windows format before running java 113 | if $cygwin ; then 114 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 115 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 116 | JAVACMD=`cygpath --unix "$JAVACMD"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Escape application args 158 | save () { 159 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 160 | echo " " 161 | } 162 | APP_ARGS=$(save "$@") 163 | 164 | # Collect all arguments for the java command, following the shell quoting and substitution rules 165 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 166 | 167 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 168 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 169 | cd "$(dirname "$0")" 170 | fi 171 | 172 | exec "$JAVACMD" "$@" 173 | -------------------------------------------------------------------------------- /gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | set DIRNAME=%~dp0 12 | if "%DIRNAME%" == "" set DIRNAME=. 13 | set APP_BASE_NAME=%~n0 14 | set APP_HOME=%DIRNAME% 15 | 16 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 17 | set DEFAULT_JVM_OPTS= 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windows variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | 53 | :win9xME_args 54 | @rem Slurp the command line arguments. 55 | set CMD_LINE_ARGS= 56 | set _SKIP=2 57 | 58 | :win9xME_args_slurp 59 | if "x%~1" == "x" goto execute 60 | 61 | set CMD_LINE_ARGS=%* 62 | 63 | :execute 64 | @rem Setup the command line 65 | 66 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 67 | 68 | @rem Execute Gradle 69 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 70 | 71 | :end 72 | @rem End local scope for the variables with windows NT shell 73 | if "%ERRORLEVEL%"=="0" goto mainEnd 74 | 75 | :fail 76 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 77 | rem the _cmd.exe /c_ return code! 78 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 79 | exit /b 1 80 | 81 | :mainEnd 82 | if "%OS%"=="Windows_NT" endlocal 83 | 84 | :omega 85 | -------------------------------------------------------------------------------- /imitate.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/imitate.mp4 -------------------------------------------------------------------------------- /pic/c_0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_0.gif -------------------------------------------------------------------------------- /pic/c_1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_1.gif -------------------------------------------------------------------------------- /pic/c_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_1.png -------------------------------------------------------------------------------- /pic/c_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_2.gif -------------------------------------------------------------------------------- /pic/c_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_2.png -------------------------------------------------------------------------------- /pic/c_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_3.gif -------------------------------------------------------------------------------- /pic/c_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_3.png -------------------------------------------------------------------------------- /pic/c_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_4.gif -------------------------------------------------------------------------------- /pic/c_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_4.png -------------------------------------------------------------------------------- /pic/c_5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_5.gif -------------------------------------------------------------------------------- /pic/c_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_5.png -------------------------------------------------------------------------------- /pic/c_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chengxiaobo2/ComplexAnimation/68b5122b18279bc0643e68585e14ac92e1e06400/pic/c_6.png -------------------------------------------------------------------------------- /settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | --------------------------------------------------------------------------------