zoukankan      html  css  js  c++  java
  • 随着ScrollView的滑动,渐渐的执行动画View


    今天是实现了一个小功能的东西。看看效果图:
    123.gif

    实现方式:
    1.自定义ScrollView   复写onScrollChange方法,来计算滑动的位置。
    2.自定义接口,通过接口来在ScrollView中控制,滑动的高度的进度。
    3.在自定义View中去执行动画。


    代码实现:
    1.ScrollView   最主要的代码只有计算滑动位置的代码了,其实也是很简单的,获取子View的个数,每次都去for循环,去计算字View的位置,以及当前ScrollView的top bottom
    代码:

    @Override
        protected void onScrollChanged(int l, int t, int oldl, int oldt) {
            super.onScrollChanged(l, t, oldl, oldt);
            int currentBottom = t + height ;
            int currentTop = t ; 
            Log.e("Slide""onScrollChange") ;
            
            for (int i = 0; i < childCount; i++) {
                View childView = contentLayout.getChildAt(i )  ;
                if (!(childView  instanceof EasySlideInter)) {
                    continue ; 
                }
                int childTop = childView.getTop() ; 
                int childBottom = childView.getBottom() ;
                int childHeight = childView.getHeight() ; 
                EasySlideInter inter = (EasySlideInter) childView ; 
                if ( currentTop > childTop && currentTop < childBottom ) {
                    inter.contentSlide(countProgress(currentTop, childBottom, childHeight)); 
                }else if (currentBottom > childTop && currentBottom < childBottom ) {
                    inter.contentSlide(100 - countProgress(currentBottom, childBottom, childHeight)); 
                }else if(childTop >= currentTop && childBottom <= currentBottom){
                    inter.resetContent();
                }
            }
    }  


    通过childView的top位置与ScrollView的当前的top位置来判断是哪个子View正在慢慢的出现,计算出progress 传递给子View中去。

    其实最终要的代码就是这么一段,动画的执行都在子View的接口方法中去做的。
    我贴上一个子View的实现:
        
        @Override
        public void contentSlide(int progress) {
            textAnimator.setCurrentPlayTime(progress);
            backAnimator.setCurrentPlayTime(progress);
        }
        @Override
        public void resetContent() {
            textAnimator.setCurrentPlayTime(100);
            backAnimator.setCurrentPlayTime(100);
        }
        
        
        private void initAnimation(){
            textAnimator = ObjectAnimator.ofInt(text"textColor", Color.BLUE , Color.RED); 
            textAnimator.setEvaluator(new ArgbEvaluator());
            textAnimator.setDuration(100)  ;
            textAnimator.setInterpolator(new LinearInterpolator()) ;
            
            backAnimator = ObjectAnimator.ofInt(this"backgroundColor", Color.BLACK , Color.BLUE , Color.BLACK); 
            backAnimator.setEvaluator(new ArgbEvaluator());
            backAnimator.setDuration(100)  ;
            backAnimator.setInterpolator(new LinearInterpolator()) ;
            
        }  
    实现两个接口的方法,在这两个方法中,去控制动画的进度。
    很简单的,不再累赘叙述了。
    源码下载:








    附件列表

    • 相关阅读:
      监听事件 队列 邮件发送
      elasticsearch 天气
      elasticsearch
      event 监听事件
      observer 监听的实现 laravel 框架
      中间件
      git 代码 上传到码云
      laravel 省略入口文件 index.php
      limit offset 和limit
      CSS变形和动画
    • 原文地址:https://www.cnblogs.com/flyme2012/p/4558646.html
    Copyright © 2011-2022 走看看