2

How I can reach such behavior with a smooth slider?

enter image description here

I want that first ImageView to increase his width and cover over second ImageView.

I tried three different approaches to this purpose.

First I drew bitmap (two bitmaps combined inside one canvas) inside the canvas of one ImageView. New position generated with ValueAnimation but it gives values with not equals intervals. During rendering the transition do jumps noticeably enough. On a good phone especially.

Second I did my own method for generating sequence numbers without intervals and but occurs another problem: phone cant render new bitmaps a few hundred times per second. If to do intervals jumps occur again.

Then I tried another way: to create two ImageView and first must smooth roll out over the second. But I can't reach the proper effect than the first picture must not stretch (image inside ImageView increased width together) but need a roll-out like on GIF.

Code of my third the attempt:

In fragment 

val animation: Animation = AnimationUtils.loadAnimation(ctx, R.anim.scale_right)
imageView.startAnimation(animation)
imageView.visibility = View.VISIBLE

scale_right.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <scale
    android:duration="6000"
    android:fromXScale="0"
    android:fromYScale="1.0"
    android:pivotX="0%"
    android:pivotY="0%"
    android:toXScale="1.0"
    android:toYScale="1.0" />
</set>

What do I need to do?

Yevgen
  • 93
  • 1
  • 1
  • 8
  • You can create custom view with overrided `onDraw(Canvas)` method to achive such behavior. If you want to make it intractable (swipe by user) you can use `ViewPager` with custom page animation – Ufkoku May 24 '20 at 18:31
  • @Ufkoku No, without user's swipe. Images must move by themselves. – Yevgen May 24 '20 at 18:35
  • @Ufkoku Do you have an example with `onDraw(Canvas)` for the effect which I need? – Yevgen May 24 '20 at 18:37
  • Have you tried animations with ConstraintSet ? https://proandroiddev.com/creating-awesome-animations-using-constraintlayout-and-constraintset-part-i-390cc72c5f75 – Achraf Amil May 24 '20 at 18:44
  • @AchrafAmil well, a very interesting way! But my main problem not resolved yet. How to reach the effect that image not scaling when ImageView will increase width but will opening by smooth slider? (like on GiF) – Yevgen May 24 '20 at 19:08
  • Maybe combining the ConstraintSet animation for image constraints change with some kind of start_crop similar to this : https://stackoverflow.com/questions/29783358/how-set-imageview-scaletype-to-topcrop – Achraf Amil May 24 '20 at 22:04
  • You can use ValueAnimator inside your custom View. Animate value from 0 to 1, and in `onDraw` use this value as percentage to draw your new image. here is some example https://stackoverflow.com/questions/18616035/how-to-animate-a-path-on-canvas-android – Ufkoku May 25 '20 at 07:25
  • @Ufkoku but how to write code correctly that image doesn't stretch? – Yevgen May 25 '20 at 18:07

0 Answers0