All Projects → florent37 → Kotlinpleaseanimate

florent37 / Kotlinpleaseanimate

Licence: apache-2.0
Kotlin, please, can you animate my views ?

Programming Languages

java
68154 projects - #9 most used programming language
kotlin
9241 projects

Projects that are alternatives of or similar to Kotlinpleaseanimate

Chips Input Layout
A customizable Android ViewGroup for displaying Chips (specified in the Material Design Guide).
Stars: ✭ 591 (+9.24%)
Mutual labels:  material, design, view
Fiftyshadesof
An elegant context-care loading placeholder for Android
Stars: ✭ 1,110 (+105.18%)
Mutual labels:  material, design, view
Arclayout
With Arc Layout explore new styles and approaches on material design
Stars: ✭ 1,662 (+207.21%)
Mutual labels:  material, design, view
Tutoshowcase
A simple and Elegant Showcase view for Android
Stars: ✭ 499 (-7.76%)
Mutual labels:  material, design
Dialogsheet
An Android library to create fully material designed bottom dialogs similar to the Android Pay app.
Stars: ✭ 236 (-56.38%)
Mutual labels:  material, design
Material Colors Native
Material Colors - A React Native App to Select Material Colors for macOS.
Stars: ✭ 246 (-54.53%)
Mutual labels:  material, design
Materialsearchbar
Material Design Search Bar for Android
Stars: ✭ 2,008 (+271.16%)
Mutual labels:  material, view
timepicker-ui
timepicker-ui is an easy library with timepicker. Fully wrote with TypeScript. This library is based on Material Design from Google.
Stars: ✭ 18 (-96.67%)
Mutual labels:  design, material
react-mdl-extra
React MDL Extra components
Stars: ✭ 41 (-92.42%)
Mutual labels:  design, material
Sequent
A simple continuous animation library for Android UI.
Stars: ✭ 263 (-51.39%)
Mutual labels:  material, animate
Md Date Time Picker
An implementation of Material Design Picker components in vanilla CSS, JS, and HTML
Stars: ✭ 272 (-49.72%)
Mutual labels:  material, design
Shrine Materialdesign2
implementation of Material Design 2 Shrine project
Stars: ✭ 215 (-60.26%)
Mutual labels:  material, design
React Mdc Web
Material Design Components for React
Stars: ✭ 175 (-67.65%)
Mutual labels:  material, design
React Materialui Notifications
Spec compliant notifications for react and material ui users
Stars: ✭ 252 (-53.42%)
Mutual labels:  material, design
Materialdesign2
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-68.58%)
Mutual labels:  material, design
FigmaConvertXib
FigmaConvertXib is a tool for exporting design elements from figma.com and generating files to a projects iOS .xib / Android .xml
Stars: ✭ 111 (-79.48%)
Mutual labels:  design, view
Shapeofview
Give a custom shape to any android view, Material Design 2 ready
Stars: ✭ 2,977 (+450.28%)
Mutual labels:  material, view
Fabsmenu
A simple library to use a menu of FloatingActionButtons from Design Support Library that follow Material Design Guidelines
Stars: ✭ 324 (-40.11%)
Mutual labels:  material, design
Materialimageloading
Material image loading implementation
Stars: ✭ 396 (-26.8%)
Mutual labels:  material, view
Expansionpanel
Android - Expansion panels contain creation flows and allow lightweight editing of an element.
Stars: ✭ 1,984 (+266.73%)
Mutual labels:  material, view

Kotlin Please Animate

Android Arsenal CircleCI Language

Kotlin, please, can you animate my views ?

A Kotlin way to declare and run beautiful animations ! Please be gentle with Kotlin :)

Android app on Google Play

gif

please {
   animate(avatar) toBe {
      bottomOfItsParent(marginDp = 36f)
      leftOfItsParent(marginDp = 16f)
      width(40, keepRatio = true, toDp = true)
   }
}.start()

Download

Buy Me a Coffee at ko-fi.com

In your module Download

implementation 'com.github.florent37:kotlinpleaseanimate:1.0.2'

This code describe the video above

please(duration = 1500L) {
   animate(avatar) toBe {
      bottomOfItsParent(marginDp = 36f)
      leftOfItsParent(marginDp = 16f)
      visible()
      width(40, keepRatio = true, toDp = true)
   }
   animate(name) toBe {
      rightOf(avatar, marginDp = 16f)
      sameCenterVerticalAs(avatar)
      textColor(Color.WHITE)
   }
   animate(subname) toBe {
      rightOf(name, marginDp = 5f)
      sameCenterVerticalAs(name)
      textColor(Color.WHITE)
   }
   animate(revert) toBe {
      rightOfItsParent(marginDp = 4f)
      bottomOfItsParent(marginDp = 12f)
      backgroundAlpha(0f)
   }
   animate(start) toBe {
      aboveOf(revert, marginDp = 4f)
      rightOfItsParent(marginDp = 4f)
      backgroundAlpha(0f)
   }
   animate(bottomLayout) toBe {
      originalPosition()
   }
   animate(content) toBe {
      originalPosition()
      visible()
   }
}.start()

Follow scroll

gif

Use setPercent to apply modify the current step of the animation

Exemple with a scrollview

val animation = please {
        animate(avatar) toBe {
           topOfItsParent(marginDp = 20f)
           leftOfItsParent(marginDp = 20f)
           scale(0.5f, 0.5f)
        }

        animate(username) toBe {
           rightOf(avatar, marginDp = 16f)
           sameCenterVerticalAs(avatar)

           alpha(0.5f)
        }

        animate(revert) toBe {
           rightOfItsParent(marginDp = 20f)
           sameCenterVerticalAs(avatar)
        }

        animate(background) toBe {
           height(h, horizontalGravity = Gravity.LEFT, verticalGravity = Gravity.TOP)
        }
}
scrollview.setOnScrollChangeListener(NestedScrollView.OnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->
    val percent = scrollY * 1f / v.maxScrollAmount
    animation.setPercent(percent)
})

Chain animations

Just ask the kotlin's animation if he wants to execute another animation after, using thenCouldYou animate

please(duration = 1000L) {
   animate(image, withCameraDistance = 500f) toBe {
      flippedHorizontally()
   }
}.thenCouldYou(duration = 500L) {
   animate(image, withCameraDistance = 1000f) toBe {
      alpha(0.5f)
   }
}.start()

Apply directly

If you want your animation to be applied directly, be bossy with kotlin and force it to apply it using now() !

please {
   animate(view) toBe {
      outOfScreen(Gravity.BOTTOM)
   }
}.now();

Reset

Use reset to return to the initial state of views

animation.reset():

List of expectations

please {
  animate(view) { //toBe is optional

     rightOf(view, marginDp=)
     leftOf(view, marginDp=)
     belowOf(view, marginDp=)
     aboveOf(view, marginDp=)

     originalPosition()

     sameCenterAs(view, horizontal=, vertical=)
     sameCenterHorizontalAs(view)
     sameCenterVerticalAs(view)
     centerInParent(horizontal=, vertical=)
     centerVerticalInParent()
     centerHorizontalInParent()

     centerBetweenViews(view1, view2, horizontal, vertical)
     centerBetweenViewAndParent(otherView, horizontal, vertical, toBeOnRight, toBeOnBottom)

     topOfItsParent()
     rightOfItsParent()
     bottomOfItsParent()
     leftOfItsParent()

     alignBottom(otherView, marginDp=)
     alignTop(otherView)
     alignLeft(otherView)
     alignRight(otherView)

     outOfScreen(gravitiy)  //Gravity.LEFT / Gravity.RIGHT / Gravity.TOP / Gravity.BOTTOM

     alpha(alpha)
     sameAlphaAs(otherView)
     visible()
     invisible()

     custom(object: CustomAnimExpectation(){ ... })

     originalScale()

     scale(scaleX, scaleY)
     height(height, keepRatio=, useDp=)
     width(width, keepRatio=, useDp=)
     sameScaleAs(otherView)
     sameWidthAs(otherView)
     sameHeightAs(otherView)

     marginTop(margin)
     marginBottom(margin)
     marginRight(margin)
     marginLeft(margin)

     paddingTop(padding)
     paddingBottom(padding)
     paddingRight(padding)
     paddingLeft(padding)

     textColor(textColor)
     textSize(textSize)
     backgroundAlpha(alpha)

     rotated(rotation)
     vertical(bottomOfViewAtLeft)
     atItsOriginalRotation()
}

Credits

Author: Florent Champigny

Blog : http://www.tutos-android-france.com/

Fiches Plateau Moto : https://www.fiches-plateau-moto.fr/

Forked from ExpectAnim: https://github.com/florent37/ExpectAnim

Android app on Google Play Follow me on Google+ Follow me on Twitter Follow me on LinkedIn

License

Copyright 2018 florent37, Inc.

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

   http://www.apache.org/licenses/LICENSE-2.0

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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].