Lottie动画动态定位以及缩放

有时候我们需要用Lottie来播放一些,相对与某些位置的非固定动画,这时候就需要给他进行定位缩放了,请看我的方法。

刚开始的时候,我觉得这是一件非常简单的事情,不就是确定一个点,然后不同设备根据这个点的比例来缩放和移动lottie组件就可以了。

但在实际使用中,我发现

  1. lottie组件的大小并不是固定的其本身的px大小,而是会根据不同设备来自动伸缩的,具体怎么伸缩的我不知道。

  2. lottie组件使用setScaleX缩放之后,并不是就整个组件缩小,而是里面的动画缩小,并且居中了。

这就很尴尬了,特别是第二点。

所以,我现在有两个结论

  1. 组件大小不能根据json文件中的大小而定,需要实际获取
  2. 缩放之后并不是组件缩放,所以不能单单根据宽高缩放了多少来反向移动,还需要计算其缩放之后又居中带来的移动。
//首先是固定一个点,我这里是金币增加动画以组件位置为点
int[] location = new  int[2] ;
iv_coin.getLocationInWindow(location); //获取在当前窗口内的绝对坐标
iv_coin.getLocationOnScreen(location);//获取在整个屏幕内的绝对坐标

float rightScale = 0.86f;//这里因为美工做的动画留有边距,所以要去掉一点,没有边距直接1.0f
float scale = (float)(location[0])/(float) (animation_view.getWidth()*rightScale);//用目标宽度/组件当前宽度,获得当前缩放比例
if(scale<1)//如果是需要缩小
  {
     animation_view.setScaleX(scale);//设置动画缩放比例,用setScale()应该也行
     animation_view.setScaleY(scale);
     float nowAnimWidth = (float) animation_view.getWidth()*scale;//获取缩放之后的宽高
     float nowAnimHeight = (float)animation_view.getHeight()*scale;//无论是不是宽高相等都是需要等比例缩放的,只是可以根据具体情况,看是以宽还是高为先。
     animation_view.setX((int) (nowAnimWidth-animation_view.getWidth())/2);//设置绝对位置,需要纳入动画居中的情况/2
     animation_view.setY((int) (nowAnimHeight-animation_view.getHeight())/2+location[1]);
  }
  else
  {
      animation_view.setX(location[0]-animation_view.getWidth()*rightScale);
      animation_view.setY(location[1]);
  }

这里写图片描述
上面的算法是根据我的那个动画来写的。
我是没有左边距的,因为组件的起始位置就在左上角,0,0,所以如果是其他的动画的话。就需要在我上面算法的基础上将lottie组件的起始位置计算进去。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Lottie动画Demo是一种用于创建和展示矢量动画的工具。通过使用Lottie库,我们可以将由设计师在Adobe After Effects中创建的动画文件(如JSON文件)直接导出到移动应用程序中,并在应用中实现动画效果。 Lottie动画Demo具有以下优点和特点: 1. 高效性:Lottie动画使用矢量图形格式,因此文件体积较小,加载速度快。这使得应用程序能够在各种设备上平滑运行,并节省了用户的流量和存储空间。 2. 动画效果多样性:设计师可以在After Effects中自由制作各种复杂的动画效果,并通过Lottie库导出为可重用的JSON文件。这些动画可以应用于按钮、图标、背景等各种元素,使应用程序更具吸引力和互动性。 3. 可定制性:Lottie动画Demo不仅能够播放设计师创建的静态动画,还可以根据应用程序需求进行动态修改和操作。开发者可以使用Lottie库中提供的方法,通过代码控制动画的播放速度、循环次数、暂停和继续等等。 4. 跨平台兼容性:Lottie动画Demo可在iOS、Android和Web等多个平台上使用。这使得开发者能够创建一次动画,并在不同的操作系统和设备上无需进行额外的开发工作即可实现相同的动画效果。 总结而言,Lottie动画Demo是一项强大的工具,可以让应用程序中的设计更加丰富和生动。它不仅让设计师能够创建复杂的动画效果,还提供了开发者所需的灵活性和可定制性。有了Lottie动画Demo,我们可以为应用程序带来更出色的用户体验,提升用户对应用程序的满意度和忠诚度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值