#scaleanimation | Explore Tumblr Posts and Blogs

jacob-cs · 6 years

Text

android animation

VIEW ANIMATION , PROPERTY ANIMATION 둘다 같은 작업을 수행할수있다. 차이점이 있다면 view animation의 경우 animation후에 보이는 것은 변경되었을지 모르지만 실제 존재하는 위치는 같으므로 클릭을 한다고 하면 본래 위치에 클릭해야 해당 view가 이벤트를 받아들이게 된다.Their state changes but their property does not change.

ObjectAnimator를 이용하는 것은 property animation이다. ObjectAnimator is a subclass of ValueAnimator

TranslateAnimation, RotateAnimation, ScaleAnimation, AlphaAnimation 을 이용하는 것은 view animation이다.

When using View Animations, use XML instead of doing it programmatically. Using XML files, it is more readable and can be shared among other views.

참조 https://youtu.be/_UWXqFBF86U?t=204

basics 3 types of Animations:

Property Animations — They are used to alter property of objects (Views or non view objects). We specify certain properties(like translateX, TextScaleX) of the objects to change. Various characteristics of animation which can be manipulated are animation duration, whether to reverse it and for how many times we want to repeat the animation etc. They were introduced in Android 3.0 (API level 11).

View Animations — They are used to do simple animations like changing size, position, rotation, control transparency. They are easy to build and are very fast but have their own constraints. For eg — Their state changes but their property does not change. View animations will be covered in part 2.

Drawable Animations — This is used to do animation using drawables. An XML file specifying various list of drawables is made which are run one by one just like a roll of a film. This is not much used so I won’t cover it.

property animation

- ObjectAnimator를 이용한다. ( ValueAnimator를 기반으로 한다 )

- AnimatorSet 를 이용 여러 view들의 animations을 동시에 진행가능하다. ( with()를 사용하기도한다 )

- 하나의 view에 대한 여러 animation을 동시에 진행하는 경우 ViewPropertyAnimator 를 이용한다.

animateTextView.animate().rotation(360f).y(500f).setDuration(2000);

View Animation

Tween Animation — These are the animations applied on a view which is responsible for scaling, translating, rotating or fading a view (either together or one by one).

Frame Animation — These animations are applied using various drawables. In this, we just have to specify a list of drawables in the XML code and the animation runs just like frames of a video.

View Animations are not much used because the same thing can be using ViewPropertyAnimator object which is much faster and readable. Frame animation is similar to Drawable Animation. The more important thing is to understand the new Transition framework which is much useful and provide beautiful animations.

ValueAnimator는 기본적으로 특정범위의 값들을 순차적으로 생성하는 기능을 하고 이 생성된 값을 view의 속성값으로 할당함으로써 애니메이션을 구현한다.

참조 영상)

https://youtu.be/jwdTNaddHHs

https://youtu.be/AaovTqdqYHY?t=288

API 21이후에 추간된 ANIMATION

Shared Element Transitions

Activity Transitions

Circular Reveal

Shared Element Transitions

http://blogs.quovantis.com/how-to-apply-shared-element-transitions-in-android/

참고자료)

view animation brief explanation

https://youtu.be/_UWXqFBF86U

A beginners guide to implement Android Animations — Part 1 (2 part series)

https://medium.com/@shubham.bestfriendforu/a-beginners-guide-to-implement-android-animations-part-1-2-part-series-b5fce1fc85

VIEW ANIMATION VS PROPERTY ANIMATION IN ANDROID

https://mahbubzaman.wordpress.com/2015/06/03/view-animation-vs-property-animation-in-android/

Sometimes we need to animate some view in our application. Here is a sample code for translate a view over x axis from its location.

Button bt; bt = (Button) findViewById(R.id.bt); bt.setOnClickListener(this);

TranslateAnimation animation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 300, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_SELF); animation.setDuration(1000); animation.setFillAfter(true); bt.setAnimation(animation);

But the problem of this code is if you want to click this button after animate you can not, why lets read the documentation from android developer site

disadvantage of the view animation system is that it only modified where the View was drawn, and not the actual View itself. For instance, if you animated a button to move across the screen, the button draws correctly, but the actual location where you can click the button does not change, so you have to implement your own logic to handle this.

To solve this issue we will use ObjectAnimator class to animate our view.

ObjectAnimator animXNext = ObjectAnimator.ofFloat(bt, "translationX", Animation.RELATIVE_TO_SELF, 300); animXNext.setDuration(1000); animXNext.start();

Now you can click on the button. Enjoy

#android #animation #view animation #property animation #view #property #objectanimator #valueanimator #TranslateAnimation #RotateAnimation #ScaleAnimation #AlphaAnimation

0 notes

t-baba · 7 years

Photo

Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes

So far in this series, you have learned how to animate the CSS properties of different elements, how to create different SVG-related animations, and how to animate the text content of different elements on a webpage. There is one more way in which you can animate the elements on a webpage using KUTE.js, and that is by changing the values of different attributes. This requires you to include the attributes plugin in your project.

In this tutorial, you will learn how to use the attributes plugin to animate the value of different kinds of attributes in KUTE.js. We will also discuss different easing functions that you can use to control the pace of different animations.

Easing Functions

Objects in real life very rarely move linearly. They are either accelerating or decelerating. Even the acceleration and deceleration occur at different magnitudes. Up to this point, all our animations have progressed linearly. This doesn't feel natural at all. In this section, you will learn about all the easing functions that KUTE.js provides for controlling the pace of different animations.

The core easing functions in the library are included in the core engine out of the box. Let's say you want to apply the QuadraticInOut easing to an animation. This can be achieved in two ways:

easing: KUTE.Easing.easingQuadraticInOut // OR easing: 'easingQuadraticInOut'

Each of the easing functions has a unique curve that determines how the elements will accelerate during the animation. A sinusoidal curve implies linear acceleration. Keep in mind that this is different from the linear easing function. The linear function implies a linear speed of animation, while a sinusoidal curve implies a linear speed of acceleration for the animation. In other words, the speed of the animation will increase or decrease linearly. Similarly, quadratic implies acceleration with a power of two, cubic implies a power of three, quartic implies a power of four, and quintic implies a power of five. There are also circular and exponential easing functions.

You can append In, Out, or InOut to any of the easing functions. The value In implies that the animation will start very slowly and keep accelerating until the end. The value Out implies that the animation will start at the maximum speed and then decelerate slowly until it comes to a halt at the end. The value InOut means that the animation will speed up at the beginning and slow down at the end.

You can also use bounce and elastic easing functions in your animations and append In, Out, or InOut to any of them. In the following demo, I have applied all these easing functions on different circles so that you can see how they affect the pace of the animation.

It is possible that none of the core easing functions provide the animation pace that you are looking for. In such cases, you can include the Cubic Bezier functions in your project from the experiments branch and start using those easing functions.

Similarly, KUTE.js also provides some physics-based easing functions imported from the Dynamics.js library. You can read more about all these easing functions and how to properly use them on the easing function page of the library.

Animating Attributes

Attributes in SVG can accept numbers as well as strings as their value. The strings can be color values or numbers suffixed with a unit like px, em, or %. The names of the attributes themselves can also consist of two words joined by a hyphen. Keeping these differences in mind, KUTE.js provides us different methods that can be used to specify the values of different attributes.

As you can see, suffixed values need to be enclosed within quotes. Similarly, attributes which contain a hyphen in their name need to be enclosed inside quotes or specified in camelCase form.

Unitless Attributes

A lot of attributes accept unitless values. For example, the stroke-width of a path could be unitless. Similarly, you don't have to specify a unit for the r, cx, and cy attributes of a circle element. You can animate all these attributes from one value to another using the attributes plugin.

Now that you know how to use different easing functions, you will be able to animate different attributes at different paces. Here is an example:

The first tween animates the radius of both circles at once using the allTo() method we discussed in the first tutorial. If set to true, the yoyo attribute plays the animation in the reverse direction.

The cx attribute of both the circles is animated individually. However, they are both triggered by the same button click. Finally, the cy attribute of both the circles is animated at once with an offset of 1000 milliseconds.

Color Attributes

Starting from version 1.5.7, the attribute plugin in KUTE.js also allows you to animate the fill, stroke, and stopColor attributes. You can use valid color names or hex values for the colors. You can also provide the color values in RGB or HSL format.

One important thing that you have to keep in mind is that the animations will only seem to work if you are not setting the value of these properties in CSS. In the following demo, the fill color wouldn't have animated at all if I had added the following CSS in our demo.

rect { fill: brown; }

The demo I created is very basic, but you can make it more interesting by applying transforms and using more colors.

Suffixed Attributes

A lot of SVG attributes like r and stroke-width can work with and without suffixes. For example, you can set the value of r to be a number like 10 or in terms of em units like 10em. There are some attributes like offset attribute for color stops that always require you to add a suffix. While specifying a value for suffixed attributes in KUTE.js, always make sure that you enclose the value within quotes.

In the following example, I have animated the offset value of the first stop in a gradient and the color of the second stop. Since offset requires a suffix, I have enclosed the value inside quotes.

There are three different gradients in the demo, and each of these gradients has two color stops with the class names stop1 and stop2. I have also applied a scale transform using the svgTransform attribute, which we discussed in the third tutorial of the series.

Final Thoughts

In this tutorial, you learned about different easing functions available in KUTE.js and how you can use them to control the pace of your own animations. You also learned how to animate different kinds of attributes.

I have tried to cover all the important aspects of KUTE.js in this series. This should be enough to help you use KUTE.js confidently in your own projects. You can also read the documentation in order to learn more about the library.

I would also recommend that you go through the source code and see how the library actually works. If you have any questions or tips related to this tutorial, feel free to share them in the comments.

by Monty Shokeen via Envato Tuts+ Code http://ift.tt/2zxYa47

#CSS3 #HTML5 Branding #HTML5 Weekly #HTMLl5 demos #Javascript #Javascript Branding #Javascript Weekly

5 notes · View notes