精华内容
下载资源
问答
  • 4 关于做动画,建个3D模型怎样做成动画并在我自己编的app里面显示的呢?有什么书籍或者例子可以参考的吗? 求教各位大神了,我对于这些真的完全不懂,但是毕设题目已经联系老师了,老师让我做出ppt来,我觉得我只有...
  • iOSAPP启动效果复杂动画之抽丝剥茧

    千次阅读 2016-07-01 11:09:12
    随着开发者的增多和时间的累积,AppStore已经有非常多的应用了,每年都有很多新的APP产生。但是我们手机上留存的应用有限,所以如何吸引用户,成为产品设计的一项重要内容。其中炫酷的动画效果是重要内容之一,我们...

    一、前言

    随着开发者的增多和时间的累积,AppStore已经有非常多的应用了,每年都有很多新的APP产生。但是我们手机上留存的应用有限,所以如何吸引用户,成为产品设计的一项重要内容。其中炫酷的动画效果是重要内容之一,我们会发现很多好的应用上面都有许多很炫的效果。可能一提到炫酷的动画,很多人都很头疼,因为动画并不是那么好做,实现一个好的动画需要时间、耐心和好的思路。下面我们就以一个有趣的动画(如下图)为例,抽丝剥茧,看看到底是怎么实现的!

    571495-1f69e56d6daa0786.gif

    二、分析

    上面图中的动画第一眼看起来的确是有点复杂,但是我们来一步步分析,就会发现其实并不是那么难。仔细看一下就会发现,大致步骤如下:

    1、先出来一个圆

    2、圆形在水平和竖直方向上被挤压,呈椭圆形状的一个过程,最后恢复成圆形

    3、圆形的左下角、右下角和顶部分别按顺序凸出一小部分

    4、圆和凸出部分形成的图形旋转一圈后变成三角形

    5、三角形的左边先后出来两条宽线,将三角形围在一个矩形中

    6、矩形由底部向上被波浪状填满

    7、被填满的矩形放大至全屏,弹出Welcome

    动画大致就分为上面几个步骤,拆分后我们一步步来实现其中的效果(下面所示步骤中以Swift代码为例,demo中分别有Objective-C和Swift的实现)。

    三、实现圆形以及椭圆的渐变

    首先,我们创建了一个新工程后,然后新建了一个名AnimationView的类继承UIView,这个是用来显示动画效果的一个view。然后先添加CircleLayer(圆形layer),随后实现由小变大的效果。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    class AnimationView: UIView {
          let circleLayer = CircleLayer()
          override init(frame: CGRect) {
               super.init(frame: frame)
               backgroundColor = UIColor.clearColor()
               addCircleLayer()
           }
          required init?(coder aDecoder: NSCoder) {
               super.init(coder: aDecoder)
           }
          /**
           add circle layer
           */
          func addCircleLayer() {
               self.layer.addSublayer(circleLayer)
               circleLayer.expand()
           }
      }

    其中expand()这个方法如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /**
      expand animation function
    */
    func expand() {
         let expandAnimation: CABasicAnimation = CABasicAnimation(keyPath: "path")
         expandAnimation.fromValue = circleSmallPath.CGPath
         expandAnimation.toValue = circleBigPath.CGPath
         expandAnimation.duration = KAnimationDuration
         expandAnimation.fillMode = kCAFillModeForwards
         expandAnimation.removedOnCompletion = false
         self.addAnimation(expandAnimation, forKey: nil)
    }

    运行效果如下

    571495-45f556f0cc01127d.gif

    第一步做好了,接下来就是呈椭圆形状的变化了,仔细分析就比如一个弹性小球,竖直方向捏一下,水平方向捏一下这样的效果。这其实就是一个组合动画,如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    /**
       wobbl group animation
    */
    func wobbleAnimate() {
            // 1、animation begin from bigPath to verticalPath
            let animation1: CABasicAnimation = CABasicAnimation(keyPath: "path")
            animation1.fromValue = circleBigPath.CGPath
            animation1.toValue = circleVerticalSquishPath.CGPath
            animation1.beginTime = KAnimationBeginTime
            animation1.duration = KAnimationDuration
            // 2、animation vertical to horizontal
            let  animation2: CABasicAnimation = CABasicAnimation(keyPath: "path")
            animation2.fromValue = circleVerticalSquishPath.CGPath
            animation2.toValue = circleHorizontalSquishPath.CGPath
            animation2.beginTime = animation1.beginTime + animation1.duration
            animation2.duration = KAnimationDuration
            // 3、animation horizontal to vertical
            let  animation3: CABasicAnimation = CABasicAnimation(keyPath: "path")
            animation3.fromValue = circleHorizontalSquishPath.CGPath
            animation3.toValue = circleVerticalSquishPath.CGPath
            animation3.beginTime = animation2.beginTime + animation2.duration
            animation3.duration = KAnimationDuration
            // 4、animation vertical to bigPath
            let  animation4: CABasicAnimation = CABasicAnimation(keyPath: "path")
            animation4.fromValue = circleVerticalSquishPath.CGPath
            animation4.toValue = circleBigPath.CGPath
            animation4.beginTime = animation3.beginTime + animation3.duration
            animation4.duration = KAnimationDuration
            // 5、group animation
            let animationGroup: CAAnimationGroup = CAAnimationGroup()
            animationGroup.animations = [animation1, animation2, animation3, animation4]
            animationGroup.duration = 4 * KAnimationDuration
            animationGroup.repeatCount = 2
            addAnimation(animationGroup, forKey: nil)
        }

    上面代码中实现了从 圆 → 椭圆(x方向长轴)→ 椭圆(y方向长轴)→ 圆这一系列的变化,最后组合成一个动画。这一步实现后效果如下

    571495-ea89a400d60666ac.gif

    四、实现圆形边缘的凸出部分

    关于这个凸出部分,乍一看可能感觉会比较难实现,看起来挺复杂的。其实实现的原理很简单,仔细分析我们会发现这三个凸出部分连起来刚好是一个三角形,那么第一步我们就在之前的基础上先加一个三角形的layer,如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import UIKit
    class TriangleLayer: CAShapeLayer {
        let paddingSpace: CGFloat = 30.0
        override init() {
             super.init()
            fillColor = UIColor.colorWithHexString("#009ad6").CGColor
            strokeColor = UIColor.colorWithHexString("#009ad6").CGColor
            lineWidth = 7.0
            path = smallTrianglePath.CGPath
        }
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
        var smallTrianglePath: UIBezierPath {
            let smallPath = UIBezierPath()
            smallPath.moveToPoint(CGPointMake(5.0 + paddingSpace, 95.0))
            smallPath.addLineToPoint(CGPointMake(50.0, 12.5 + paddingSpace))
            smallPath.addLineToPoint(CGPointMake(95.0 - paddingSpace, 95.0))
            smallPath.closePath()
            return smallPath
        }
    }

    571495-2ede89a6cd82248e.png

    然后设置圆角

    1
    2
    lineCap = kCALineCapRound
    lineJoin = kCALineJoinRound

    571495-552555875c013d75.png

    下面就是来做凸出部分了,原理其实很简单,就是将现在这个三角形保持中心不变,左边向左延伸即可

    571495-01108949b2ec201f.gif

    然后同理,保持中心不变分别按顺序向右和向上拉伸

    571495-00c04554dd74a80e.gif

    具体过程是这样的

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    /**
     triangle animate function
    */
    func triangleAnimate() {
             // left
            let triangleAnimationLeft: CABasicAnimation = CABasicAnimation(keyPath: "path")
            triangleAnimationLeft.fromValue = smallTrianglePath.CGPath
            triangleAnimationLeft.toValue = leftTrianglePath.CGPath
            triangleAnimationLeft.beginTime = 0.0
            triangleAnimationLeft.duration = 0.3
             // right
            let triangleAnimationRight: CABasicAnimation = CABasicAnimation(keyPath: "path")
            triangleAnimationRight.fromValue = leftTrianglePath.CGPath
            triangleAnimationRight.toValue = rightTrianglePath.CGPath
            triangleAnimationRight.beginTime = triangleAnimationLeft.beginTime + triangleAnimationLeft.duration
            triangleAnimationRight.duration = 0.25
             // top
            let triangleAnimationTop: CABasicAnimation = CABasicAnimation(keyPath: "path")
            triangleAnimationTop.fromValue = rightTrianglePath.CGPath
            triangleAnimationTop.toValue = topTrianglePath.CGPath
            triangleAnimationTop.beginTime = triangleAnimationRight.beginTime + triangleAnimationRight.duration
            triangleAnimationTop.duration = 0.20
             // group
            let triangleAnimationGroup: CAAnimationGroup = CAAnimationGroup()
            triangleAnimationGroup.animations = [triangleAnimationLeft, triangleAnimationRight, triangleAnimationTop]
            triangleAnimationGroup.duration = triangleAnimationTop.beginTime + triangleAnimationTop.duration
            triangleAnimationGroup.fillMode = kCAFillModeForwards
            triangleAnimationGroup.removedOnCompletion = false
            addAnimation(triangleAnimationGroup, forKey: nil)
        }

    我们接下来把三角形的颜色改一下

    571495-cf83835b08c8bb1d.gif

    这里颜色相同了我们就可以看到了这个凸出的这个效果,调到正常速率(为了演示,把动画速率调慢了) ,联合之前所有的动作,到现在为止,效果是这样的

    571495-1d82cf2b8c8bb94a.gif

    到现在为止,看上去还不错,差不多已经完成一半了,继续下一步!

    五、实现旋转和矩形

    旋转来说很简单了,大家估计都做过旋转动画,这里就是把前面形成的图形旋转一下(当然要注意设置锚点anchorPoint)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /**
         self transform z
    */
    func transformRotationZ() {
         self.layer.anchorPoint = CGPointMake(0.5, 0.65)
         let rotationAnimation: CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation.z")
         rotationAnimation.toValue = CGFloat(M_PI * 2)
         rotationAnimation.duration = 0.45
         rotationAnimation.removedOnCompletion = true
         layer.addAnimation(rotationAnimation, forKey: nil)
    }

    571495-c787b7d3c75efa9a.gif

    旋转之后原图形被切成了一个三角形,思路就是把原来的大圆,按着这个大三角形的内切圆剪切一下即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /**
         contract animation function
         */
    func contract() {
            let contractAnimation: CABasicAnimation = CABasicAnimation(keyPath: "path")
            contractAnimation.fromValue = circleBigPath.CGPath
            contractAnimation.toValue = circleSmallPath.CGPath
            contractAnimation.duration = KAnimationDuration
            contractAnimation.fillMode = kCAFillModeForwards
            contractAnimation.removedOnCompletion = false
            addAnimation(contractAnimation, forKey: nil)
        }

    571495-780d0bf62e1183d2.gif

    接下来就是画矩形,新建一个RectangleLayer,划线

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /**
         line stroke color change with custom color
         - parameter color: custom color
         */
    func strokeChangeWithColor(color: UIColor) {
            strokeColor = color.CGColor
            let strokeAnimation: CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
            strokeAnimation.fromValue = 0.0
            strokeAnimation.toValue = 1.0
            strokeAnimation.duration = 0.4
            addAnimation(strokeAnimation, forKey: nil)
        }

    571495-3945bd4d1b7a9a6a.gif

    最后面就是经典的水波纹动画了,不多说,直接上代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    ![WavetAnimation.gif](http://upload-images.jianshu.io/upload_images/571495-856dc8f307d16f60.gif?imageMogr2/auto-orient/strip)
        func animate() {
             /// 1
            let waveAnimationPre: CABasicAnimation = CABasicAnimation(keyPath: "path")
            waveAnimationPre.fromValue = wavePathPre.CGPath
            waveAnimationPre.toValue = wavePathStarting.CGPath
            waveAnimationPre.beginTime = 0.0
            waveAnimationPre.duration = KAnimationDuration
             /// 2
            let waveAnimationLow: CABasicAnimation = CABasicAnimation(keyPath: "path")
            waveAnimationLow.fromValue = wavePathStarting.CGPath
            waveAnimationLow.toValue = wavePathLow.CGPath
            waveAnimationLow.beginTime = waveAnimationPre.beginTime + waveAnimationPre.duration
            waveAnimationLow.duration = KAnimationDuration
             /// 3
            let waveAnimationMid: CABasicAnimation = CABasicAnimation(keyPath: "path")
            waveAnimationMid.fromValue = wavePathLow.CGPath
            waveAnimationMid.toValue = wavePathMid.CGPath
            waveAnimationMid.beginTime = waveAnimationLow.beginTime + waveAnimationLow.duration
            waveAnimationMid.duration = KAnimationDuration
             /// 4
            let waveAnimationHigh: CABasicAnimation = CABasicAnimation(keyPath: "path")
            waveAnimationHigh.fromValue = wavePathMid.CGPath
            waveAnimationHigh.toValue = wavePathHigh.CGPath
            waveAnimationHigh.beginTime = waveAnimationMid.beginTime + waveAnimationMid.duration
            waveAnimationHigh.duration = KAnimationDuration
             /// 5
            let waveAnimationComplete: CABasicAnimation = CABasicAnimation(keyPath: "path")
            waveAnimationComplete.fromValue = wavePathHigh.CGPath
            waveAnimationComplete.toValue = wavePathComplete.CGPath
            waveAnimationComplete.beginTime = waveAnimationHigh.beginTime + waveAnimationHigh.duration
            waveAnimationComplete.duration = KAnimationDuration
             /// group animation
            let arcAnimationGroup: CAAnimationGroup = CAAnimationGroup()
            arcAnimationGroup.animations = [waveAnimationPre, waveAnimationLow, waveAnimationMid, waveAnimationHigh, waveAnimationComplete]
            arcAnimationGroup.duration = waveAnimationComplete.beginTime + waveAnimationComplete.duration
            arcAnimationGroup.fillMode = kCAFillModeForwards
            arcAnimationGroup.removedOnCompletion = false
            addAnimation(arcAnimationGroup, forKey: nil)
        }

    571495-4268debdf6e597a1.gif

    找几个点控制水波形状,画出贝塞尔曲线即可,到这里基本就完成了。接下来最后一步,放大,并弹出Welcome

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    func expandView() {
            backgroundColor = UIColor.colorWithHexString("#40e0b0")
            frame = CGRectMake(frame.origin.x - blueRectangleLayer.lineWidth,
                               frame.origin.y - blueRectangleLayer.lineWidth,
                               frame.size.width + blueRectangleLayer.lineWidth * 2,
                               frame.size.height + blueRectangleLayer.lineWidth * 2)
            layer.sublayers = nil
            UIView.animateWithDuration(0.3, delay: 0.0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
                self.frame = self.parentFrame
                }, completion: { finished in
                    self.delegate?.completeAnimation()
            })
        }

    放大完以后设置代理,然后在主的vc中添加Welcome这个Label

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // MARK: -
    // MARK: AnimationViewDelegate
    func completeAnimation() {
            // 1
            animationView.removeFromSuperview()
            view.backgroundColor = UIColor.colorWithHexString("#40e0b0")
            // 2
            let label: UILabel = UILabel(frame: view.frame)
            label.textColor = UIColor.whiteColor()
            label.font = UIFont(name: "HelveticaNeue-Thin", size: 50.0)
            label.textAlignment = NSTextAlignment.Center
            label.text = "Welcome"
            label.transform = CGAffineTransformScale(label.transform, 0.25, 0.25)
            view.addSubview(label)
            // 3
            UIView.animateWithDuration(0.4, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.1, options: UIViewAnimationOptions.CurveEaseInOut,animations: ({
                    label.transform = CGAffineTransformScale(label.transform, 4.0, 4.0)
                }), completion: { finished in
                    self.addTouchButton()
            })
        }

    到现在为止,动画全部完成

    571495-b012997cafffa0ae.gif

    六、最后

    两个版本(Objective-C & Swift)源代码:http://download.csdn.net/detail/hbblzjy/9564685      

    展开全文
  • 写一下关于html5 2d 以及发布手机APP的文章   先构思我们想要用html5 点什么事情:   1.用html5代码创建一块用于作画画布canvas  2.在canvas中写一句话如:你好,这是此系列第一个html5 2d页面  3....

    写一下关于html5 2d 以及发布手机APP的文章

     

    先构思我们想要用html5 做点什么事情: 

      1.用html5代码创建一块用于作画的画布canvas

      2.在canvas中写一句话如:你好,这是此系列的第一个html5 2d页面

      3.在canvas中画一个实心圆,并且让实心圆自动向右移动300像素

       

      效果如下:

       (图一)

       (图二)

        

    代码1:

     

    <head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>画圆动画</title>
    		<script type="text/javascript">
    			var x = 100;
    			var y = 100;
    			var ctx;
    			var canvas1;
    			
    			function init() {
    				ctx = document.getElementById('canvas').getContext('2d');
    				canvas1 = document.getElementById('canvas');
    				ctx.font = "bold 10pt sans-serif";
    		
    				setInterval(function(e) {
    					animate();
    				}, 100);
    			}
    
    			function animate() {
    
    		
    					ctx.clearRect(0, 0, canvas1.width, canvas1.height);
                                    ctx.fillStyle="black";
    				ctx.fillText("你好,这是此系列的第一个html5 2d页面.", 10, 20);
    				ctx.beginPath();
    				ctx.arc(x, y, 50, 0, 2 * Math.PI);
    				ctx.fill();
    				if (x < 300) {
    					x++;
    				}
    			}
    		</script>
    	</head>
    
    	<body onLoad="init();">
    		<canvas id="canvas">
    			
    		</canvas>
    	</body>
    
    </html>

     

     

    熟悉html 的朋友一定会发现html5 2d的代码同样离不开如下的形式

     

    <html>
      <head>
      </head>
      <body>
     </body>
    </html>

     其实也就是在普通html的代码<body></body>里面加上<canvas id="canvasid"></canvas>,然后给body添加onLoad属性并设JS代码init()方法进入画图,意思就是当整个页面的<body>标签被打开时,就用JS代码里面的init()函数去处理后面的事情,我们这里的init()是用来控制canvas去做什么画图的事情。(canvasid是canvas画布的id,可以自己设置)

    <body onLoad="init();">
    		<canvas id="canvas">			
    		</canvas>
    </body>

     

     

    所以怎么去画什么,,重点在于在javascript代码里(入门的东西唠叨一下,呵呵)

     

    <script type="text/javascript">
          function init() {
                       
                          //.......................................              
     
                          }
    </script>
     

     

     

    代码一里面只定义了4个变量,变量x为我们要作的圆的横坐标,变量y为我们要作的圆的纵坐标(也就是要画图的位置,从canvas画布的左上角)

     

     

    var x = 100;
    var y = 100;
     

     

     

     

     

    变量ctx用于保存用于在canvas画布上绘图的环境

     

     

    var ctx;
     

     

     

     ctx = document.getElementById('canvas').getContext('2d');
     

     

     

    变量canvas1用于保存canvas画布标签,主要作用只是用来获取canvas画布在网页的宽和高;

     

     

     var canvas1;
     
     canvas1 = document.getElementById('canvas');
     

     

     

     设置画布环境的字体

     

     ctx.font = "bold 10pt sans-serif";
         bold为加粗

     

         10pt 是字体的像素大小

         sans-serif 代表所用的是sans-serif字体

    如果你想设置为黑体,20像素,不加粗,代码就是

     

    ctx.font = "10pt 黑体";
     

     

     

    动画功能就是设置一个计时器,用计时器去不断去执行animate()方法里面的代码,每100毫秒1次

     

    setInterval(function(e) {
    				animate();
    				}, 100);
     
    最后就是animate方法里面,做咱们的画图
       1.刷新画布为空白
    ctx.clearRect(0, 0, canvas1.width, canvas1.height);
         有人可能会问为什么要刷新画布为空白,那不是每100毫秒都要把画布刷新为空白吗?
         答:是的,如果不每次都刷新画布为空白,会得到下面的效果:
           
          为啥会得到上面的效果?因为画布不断地画圆,前面画出来的没有清空,实际咱们看到了很多个圆重叠在一起。
     
    在画布横坐标10,竖坐标20的位置画出我们要写的字:
    ctx.fillStyle="black";     //设置画图颜色为黑色
    ctx.fillText("你好,这是此系列的第一个html5 2d页面.", 10, 20);
     
     
    画实心圆:
    ctx.beginPath();
    ctx.arc(x, y, 50, 0, 2 * Math.PI);
    ctx.fill();
     ctx.beginPath();这句很重要,就是打开一个路径,如果不重新打开一个路径,程序就会以一条弧线不断转圈的方式去画
    ctx.arc(x, y, 50, 0, 2 * Math.PI);画出我们的圆,x为横坐标,y为竖坐标,50为圆半径, 2 * Math.PI为你要画的是满圆,,如果画半圆那就是 1 * Math.PI
    ctx.fill(); 把圆心填充满
     
    最后就是为什么圆会动的秘密,添加:
    if (x < 300) {           
    				x++;           //等同于x=x+1
    	      }
     如果x小于300,那x就自动加1,此代码由于在计时器自动执行的animate()方法里面,所以每100毫秒执行animate()方法的时候都会执行到 如果x小于300,x就自动加1并赋值,咱们的圆就动了
     
    关于如何打包发布,这里推荐一个完全免费的编辑和发布软件 HBuilder ------一个当小博主在工作的时候经常使用的代码编辑软件,原因就是因为够快,下载完毕以后就可以双击桌面快捷方式打开HBuilder 
    打开软件后选左上角的 新建  ---> 移动APP   (要开发的是移动APP就选这个,如果开发的是普通的html网页就选web项目)


     会弹出个创建移动APP对话框,输入项目名称 (这里是test1)
     

     见到项目编辑器,双击index.html,会打开代码编辑器,同时也打开了即时Web浏览器;接着当然是在把代码编辑器里面的代码改为“代码一”,当右边web浏览器自动显示出黑球运动的动画,就OK了
     
    最后,我们想打包发布APP,请确保网络连接正常(因为是远程打包,如果想本地打包则要在本机安装安卓或IOS的SDK),只需要点击上面菜单的 发行->发行为原生安装包,选Android,使用DCloud公用证书即可,然后点选右下角的  打包

     
    如果提示可能缺少权限,实际是还没给程序添加像摄像头,定位之类的权限,,由于我们没用到这些功能,直接选 确认没有缺少权限,继续打包  即可

     
    提交云端成功后,点确定

     
    会显示制作安装包的状态

     当显示 打包成功,下载完成 时, 点击 打开下载目录 ,就可以看到打包完成的APP安装包
     这样就可以把APK放到模拟器或者安卓手机上去测试一下啦,呵呵


     
    展开全文
  • 制作手机gif动画

    2016-02-18 16:52:32
    以前看 泡在网上日子 里面好多demo,而且全是gif动画,感觉特别好,效果都能呈现出来。...开始在想怎么弄手机app的动画呢,想到了用豌豆夹,但是效果太差了, 发现电脑上有Genymotion,就是它了,效果相当好。

    以前看 泡在网上的日子 里面好多demo,而且全是gif动画,感觉特别的好,效果都能呈现出来。

    偶尔看到一款gif制作的软件,GifCam, 

    能够像录视频那样制作gif,觉得特别的好,然后就可以自己做一些发qq表情了,大笑


    开始在想怎么弄手机app的动画呢,想到了用豌豆夹,但是效果太差了,

    发现电脑上有Genymotion,就是它了,效果相当的好。

    展开全文
  • 前言:不知不觉中又加班到了10点半,整个启动页面了一天多时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦...


    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了蛮多东西的,所以写一篇博客跟大家分享一下.

     

    先看效果图:

     

     

    1.显示三个页面的Activity  用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view pager,实现了背景图片的移动效果.

     

    1. /** 
    2.  * 主Activity 
    3.  * @author ansen 
    4.  * @create time 2015-08-07 
    5.  */  
    6. public class KaKaLauncherActivity extends FragmentActivity {  
    7.     private GuideViewPager vPager;  
    8.     private List<LauncherBaseFragment> list = new ArrayList<LauncherBaseFragment>();  
    9.     private BaseFragmentAdapter adapter;  
    10.   
    11.     private ImageView[] tips;  
    12.     private int currentSelect;   
    13.       
    14.     @Override  
    15.     protected void onCreate(Bundle savedInstanceState) {  
    16.         super.onCreate(savedInstanceState);  
    17.         setContentView(R.layout.activity_luancher_main);  
    18.           
    19.         //初始化点点点控件  
    20.         ViewGroup group = (ViewGroup)findViewById(R.id.viewGroup);  
    21.         tips = new ImageView[3];  
    22.         for (int i = 0; i < tips.length; i++) {  
    23.             ImageView imageView = new ImageView(this);  
    24.             imageView.setLayoutParams(new LayoutParams(10, 10));  
    25.             if (i == 0) {  
    26.                 imageView.setBackgroundResource(R.drawable.page_indicator_focused);  
    27.             } else {  
    28.                 imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  
    29.             }  
    30.             tips[i]=imageView;  
    31.   
    32.             LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  
    33.             layoutParams.leftMargin = 20;//设置点点点view的左边距  
    34.             layoutParams.rightMargin = 20;//设置点点点view的右边距  
    35.             group.addView(imageView,layoutParams);  
    36.         }  
    37.           
    38.         //获取自定义viewpager 然后设置背景图片  
    39.         vPager = (GuideViewPager) findViewById(R.id.viewpager_launcher);  
    40.         vPager.setBackGroud(BitmapFactory.decodeResource(getResources(),R.drawable.bg_kaka_launcher));  
    41.   
    42.         /** 
    43.          * 初始化三个fragment  并且添加到list中 
    44.          */  
    45.         RewardLauncherFragment rewardFragment = new RewardLauncherFragment();  
    46.         PrivateMessageLauncherFragment privateFragment = new PrivateMessageLauncherFragment();  
    47.         StereoscopicLauncherFragment stereoscopicFragment = new StereoscopicLauncherFragment();  
    48.         list.add(rewardFragment);  
    49.         list.add(privateFragment);  
    50.         list.add(stereoscopicFragment);  
    51.   
    52.         adapter = new BaseFragmentAdapter(getSupportFragmentManager(),list);  
    53.         vPager.setAdapter(adapter);  
    54.         vPager.setOffscreenPageLimit(2);  
    55.         vPager.setCurrentItem(0);  
    56.         vPager.setOnPageChangeListener(changeListener);  
    57.     }  
    58.       
    59.     /** 
    60.      * 监听viewpager的移动 
    61.      */  
    62.     OnPageChangeListener changeListener=new OnPageChangeListener() {  
    63.         @Override  
    64.         public void onPageSelected(int index) {  
    65.             setImageBackground(index);//改变点点点的切换效果  
    66.             LauncherBaseFragment fragment=list.get(index);  
    67.               
    68.             list.get(currentSelect).stopAnimation();//停止前一个页面的动画  
    69.             fragment.startAnimation();//开启当前页面的动画  
    70.               
    71.             currentSelect=index;  
    72.         }  
    73.           
    74.         @Override  
    75.         public void onPageScrolled(int arg0, float arg1, int arg2) {}  
    76.         @Override  
    77.         public void onPageScrollStateChanged(int arg0) {}  
    78.     };  
    79.       
    80.     /** 
    81.      * 改变点点点的切换效果 
    82.      * @param selectItems 
    83.      */  
    84.     private void setImageBackground(int selectItems) {  
    85.         for (int i = 0; i < tips.length; i++) {  
    86.             if (i == selectItems) {  
    87.                 tips[i].setBackgroundResource(R.drawable.page_indicator_focused);  
    88.             } else {  
    89.                 tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  
    90.             }  
    91.         }  
    92.     }  
    93. }  


     

     

    2.重写viewpager   在dispatchDraw方法中控制显示的背景图片区域,

     

    1. /** 
    2.  * 重写ViewPager  主要做一个切换背景的功能 
    3.  * @author ansen 
    4.  * @create time 2015-08-07 
    5.  */  
    6. public class GuideViewPager extends ViewPager {  
    7.     private Bitmap bg;  
    8.     private Paint b = new Paint(1);  
    9.       
    10.     public GuideViewPager(Context context) {  
    11.         super(context);  
    12.     }  
    13.   
    14.     public GuideViewPager(Context context, AttributeSet attrs) {  
    15.         super(context, attrs);  
    16.     }  
    17.   
    18.     @Override  
    19.     protected void dispatchDraw(Canvas canvas) {  
    20.         if (this.bg != null) {  
    21.             int width = this.bg.getWidth();  
    22.             int height = this.bg.getHeight();  
    23.             int count = getAdapter().getCount();  
    24.             int x = getScrollX();  
    25.             // 子View中背景图片需要显示的宽度,放大背景图或缩小背景图。  
    26.             int n = height * getWidth() / getHeight();  
    27.               
    28.             /** 
    29.              * (width - n) / (count - 1)表示除去显示第一个ViewPager页面用去的背景宽度,剩余的ViewPager需要显示的背景图片的宽度。 
    30.              * getWidth()等于ViewPager一个页面的宽度,即手机屏幕宽度。在该计算中可以理解为滑动一个ViewPager页面需要滑动的像素值。 
    31.              * ((width - n) / (count - 1)) /getWidth()也就表示ViewPager滑动一个像素时,背景图片滑动的宽度。 
    32.              * x * ((width - n) / (count - 1)) /  getWidth()也就表示ViewPager滑动x个像素时,背景图片滑动的宽度。 
    33.              * 背景图片滑动的宽度的宽度可以理解为背景图片滑动到达的位置。 
    34.              */  
    35.             int w = x * ((width - n) / (count - 1)) / getWidth();  
    36.             canvas.drawBitmap(this.bg, new Rect(w, 0, n + w, height), new Rect( x, 0, x + getWidth(), getHeight()), this.b);  
    37.         }  
    38.         super.dispatchDraw(canvas);  
    39.     }  
    40.       
    41.     public void setBackGroud(Bitmap paramBitmap) {  
    42.         this.bg = paramBitmap;  
    43.         this.b.setFilterBitmap(true);  
    44.     }  
    45. }  

     

     


    3.主体布局文件  上面放一个自定义的viewpager  下面放一个显示点点的RelativeLayout

     

    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:layout_width="match_parent"  
    4.     android:layout_height="match_parent" >  
    5.   
    6.     <com.example.view.GuideViewPager  
    7.         android:id="@+id/viewpager_launcher"  
    8.         android:layout_width="match_parent"  
    9.         android:layout_height="match_parent" />  
    10.   
    11.     <RelativeLayout  
    12.         android:layout_width="fill_parent"  
    13.         android:layout_height="wrap_content"  
    14.         android:orientation="vertical" >  
    15.   
    16.         <LinearLayout  
    17.             android:id="@+id/viewGroup"  
    18.             android:layout_width="fill_parent"  
    19.             android:layout_height="wrap_content"  
    20.             android:layout_alignParentBottom="true"  
    21.             android:layout_marginBottom="30dp"  
    22.             android:gravity="center_horizontal"  
    23.             android:orientation="horizontal" />  
    24.     </RelativeLayout>  
    25.   
    26. </RelativeLayout>  

     

     

    4.ViewPager适配器

     

    1. /** 
    2.  * Viewpager适配器 
    3.  * @author apple 
    4.  * 
    5.  */  
    6. public class BaseFragmentAdapter extends FragmentStatePagerAdapter {  
    7.     private List<LauncherBaseFragment>list;  
    8.     public BaseFragmentAdapter(FragmentManager fm, List<LauncherBaseFragment> list) {  
    9.         super(fm);  
    10.         this.list = list;  
    11.     }  
    12.   
    13.     public BaseFragmentAdapter(FragmentManager fm) {  
    14.         super(fm);  
    15.     }  
    16.   
    17.     @Override  
    18.     public Fragment getItem(int arg0) {  
    19.         return list.get(arg0);  
    20.     }  
    21.   
    22.     @Override  
    23.     public int getCount() {  
    24.         return list.size();  
    25.     }  
    26. }  

     

     

    5.Fragment抽象类 有两个抽象方法,开启动画跟停止动画  所有的Fragment都继承这个类  Viewpager切换的时候可以更好的控制每个Fragment开启动画,结束动画

     

    1. /** 
    2.  * Fragment抽象类 
    3.  * @author ansen 
    4.  *  
    5.  */  
    6. public abstract class LauncherBaseFragment extends Fragment{  
    7.     public abstract void  startAnimation();  
    8.     public abstract void  stopAnimation();  
    9. }  

     

     

     

    6.打赏页Fragment  三个动画效果  硬币向下移动动画+打赏图片缩放动画+改变打赏图片透明度然后隐藏图片

     

    1. /** 
    2.  * 打赏页面 
    3.  * @author ansen 
    4.  * @create time 2015-08-07 
    5.  */  
    6. public class RewardLauncherFragment extends LauncherBaseFragment{  
    7.     private ImageView ivReward;  
    8.     private ImageView ivGold;  
    9.       
    10.     private Bitmap goldBitmap;  
    11.     private boolean started;//是否开启动画(ViewPage滑动时候给这个变量赋值)  
    12.       
    13.     @Override  
    14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
    15.         View rooView=inflater.inflate(R.layout.fragment_reward_launcher, null);  
    16.         ivGold=(ImageView) rooView.findViewById(R.id.iv_gold);  
    17.         ivReward=(ImageView) rooView.findViewById(R.id.iv_reward);  
    18.           
    19.         //获取硬币的高度  
    20.         goldBitmap=BitmapFactory.decodeResource(getActivity().getResources(),R.drawable.icon_gold);  
    21.         startAnimation();  
    22.         return rooView;  
    23.     }  
    24.       
    25.     public void startAnimation(){  
    26.         started=true;  
    27.           
    28.         //向下移动动画 硬币的高度*2+80     
    29.         TranslateAnimation translateAnimation=new TranslateAnimation(0,0,0,goldBitmap.getHeight()*2+80);  
    30.         translateAnimation.setDuration(500);  
    31.         translateAnimation.setFillAfter(true);  
    32.           
    33.         ivGold.startAnimation(translateAnimation);  
    34.         translateAnimation.setAnimationListener(new AnimationListener() {  
    35.             @Override  
    36.             public void onAnimationStart(Animation animation) {}  
    37.             @Override  
    38.             public void onAnimationEnd(Animation animation){  
    39.                 if(started){  
    40.                     ivReward.setVisibility(View.VISIBLE);  
    41.                     //硬币移动动画结束开启缩放动画  
    42.                     Animation anim=AnimationUtils.loadAnimation(getActivity(),R.anim.reward_launcher);    
    43.                     ivReward.startAnimation(anim);  
    44.                     anim.setAnimationListener(new AnimationListener(){  
    45.                         @Override    
    46.                         public void onAnimationStart(Animation animation) {}    
    47.                         @Override    
    48.                         public void onAnimationRepeat(Animation animation) {}    
    49.                         @Override    
    50.                         public void onAnimationEnd(Animation animation) {  
    51.                                 //缩放动画结束 开启改变透明度动画  
    52.                                 AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);  
    53.                                 alphaAnimation.setDuration(1000);  
    54.                                 ivReward.startAnimation(alphaAnimation);  
    55.                                 alphaAnimation.setAnimationListener(new AnimationListener() {  
    56.                                     @Override  
    57.                                     public void onAnimationStart(Animation animation) {}  
    58.                                     @Override  
    59.                                     public void onAnimationRepeat(Animation animation) {}  
    60.                                     @Override  
    61.                                     public void onAnimationEnd(Animation animation) {  
    62.                                         //透明度动画结束隐藏图片  
    63.                                         ivReward.setVisibility(View.GONE);  
    64.                                     }  
    65.                             });  
    66.                         }  
    67.                     });  
    68.                 }  
    69.             }  
    70.             @Override  
    71.             public void onAnimationRepeat(Animation animation) {}  
    72.         });  
    73.     }  
    74.       
    75.     @Override  
    76.     public void stopAnimation(){  
    77.         started=false;//结束动画时标示符设置为false  
    78.         ivGold.clearAnimation();//清空view上的动画  
    79.     }  
    80. }  

     

     

     

    7.私信页面   四个动画效果   并且四个动画都相同,其实只要我们实现了一个,其他的基本都很容易了.   依次实现四个图片的放大然后还原

     

    1. /** 
    2.  * 私信 
    3.  * @author ansen 
    4.  */  
    5. public class PrivateMessageLauncherFragment extends LauncherBaseFragment{  
    6.     private ImageView ivLikeVideo,ivThinkReward,ivThisWeek,ivWatchMovie;  
    7.       
    8.     private Animation likeAnimation,thinkAnimation,watchAnimation,thisWeekAnimation;  
    9.       
    10.     private boolean started;//是否开启动画  
    11.       
    12.     @Override  
    13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
    14.         View rooView=inflater.inflate(R.layout.fragment_private_message_launcher, null);  
    15.           
    16.         ivLikeVideo=(ImageView) rooView.findViewById(R.id.iv_private_message_like_video);  
    17.         ivThinkReward=(ImageView) rooView.findViewById(R.id.iv_private_message_think_reward);  
    18.         ivWatchMovie=(ImageView) rooView.findViewById(R.id.iv_private_message_watch_movie);  
    19.         ivThisWeek=(ImageView) rooView.findViewById(R.id.private_message_this_week);  
    20.         return rooView;  
    21.     }  
    22.       
    23.     public void stopAnimation(){  
    24.         //动画开启标示符设置成false     
    25.         started=false;  
    26.         /** 
    27.          * 清空所有控件上的动画 
    28.          */  
    29.         ivLikeVideo.clearAnimation();  
    30.         ivThinkReward.clearAnimation();  
    31.         ivWatchMovie.clearAnimation();  
    32.         ivThisWeek.clearAnimation();  
    33.     }  
    34.       
    35.       
    36.     public void startAnimation(){  
    37.         started=true;  
    38.           
    39.         /** 
    40.          * 每次开启动画前先隐藏控件 
    41.          */  
    42.         ivLikeVideo.setVisibility(View.GONE);  
    43.         ivThinkReward.setVisibility(View.GONE);  
    44.         ivWatchMovie.setVisibility(View.GONE);  
    45.         ivThisWeek.setVisibility(View.GONE);  
    46.           
    47.         new Handler().postDelayed(new Runnable() {//延时0.5秒之后开启喜欢视频动画  
    48.             @Override  
    49.             public void run(){  
    50.                 if(started)  
    51.                     likeVideoAnimation();  
    52.             }  
    53.         },500);  
    54.     }  
    55.       
    56.     /** 
    57.      * 好喜欢你的视频 
    58.      */  
    59.     private void likeVideoAnimation(){  
    60.         ivLikeVideo.setVisibility(View.VISIBLE);  
    61.           
    62.         likeAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  
    63.         ivLikeVideo.startAnimation(likeAnimation);//开启动画  
    64.         likeAnimation.setAnimationListener(new AnimationListener(){    
    65.             @Override    
    66.             public void onAnimationStart(Animation animation) {}    
    67.             @Override    
    68.             public void onAnimationRepeat(Animation animation) {}    
    69.             @Override    
    70.             public void onAnimationEnd(Animation animation) {//监听动画结束  
    71.                     if(started)  
    72.                         thinkReward();  
    73.             }    
    74.         });   
    75.     }  
    76.       
    77.     /** 
    78.      * 谢谢你的打赏 
    79.      */  
    80.     private void thinkReward(){  
    81.         ivThinkReward.setVisibility(View.VISIBLE);  
    82.         thinkAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  
    83.         ivThinkReward.startAnimation(thinkAnimation);  
    84.         thinkAnimation.setAnimationListener(new AnimationListener(){    
    85.             @Override    
    86.             public void onAnimationStart(Animation animation) {}    
    87.             @Override    
    88.             public void onAnimationRepeat(Animation animation) {}    
    89.             @Override    
    90.             public void onAnimationEnd(Animation animation) {  
    91.                 if(started)  
    92.                     watchMovie();  
    93.             }    
    94.         });   
    95.     }  
    96.       
    97.     /** 
    98.      * 一起看个电影呗 
    99.      */  
    100.     private void watchMovie(){  
    101.         ivWatchMovie.setVisibility(View.VISIBLE);  
    102.         watchAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);  
    103.         ivWatchMovie.startAnimation(watchAnimation);  
    104.         watchAnimation.setAnimationListener(new AnimationListener(){    
    105.             @Override    
    106.             public void onAnimationStart(Animation animation) {}    
    107.             @Override    
    108.             public void onAnimationRepeat(Animation animation) {}    
    109.             @Override    
    110.             public void onAnimationEnd(Animation animation) {  
    111.                 if(started)  
    112.                     thisWeek();  
    113.             }    
    114.         });   
    115.     }  
    116.       
    117.     /** 
    118.      * 好啊  这周末有空 
    119.      */  
    120.     private void thisWeek(){  
    121.         ivThisWeek.setVisibility(View.VISIBLE);  
    122.         thisWeekAnimation = AnimationUtils.loadAnimation(getActivity(),R.anim.private_message_launcher);    
    123.         ivThisWeek.startAnimation(thisWeekAnimation);  
    124.     }  
    125. }  

     

     

     

    8.最后一个引导页  就两个动画  图片的放大跟缩小,其实用xml布局的话一个动画就能搞定,跟私信页面的动画差不多.小伙伴写的代码.这里换了一种方式.代码比较多.

     

    1. /** 
    2.  * 最后一个 
    3.  * @author apple 
    4.  */  
    5. public class StereoscopicLauncherFragment extends LauncherBaseFragment implements OnClickListener{  
    6.     private static final float ZOOM_MAX = 1.3f;  
    7.     private static final  float ZOOM_MIN = 1.0f;  
    8.       
    9.     private ImageView imgView_immediate_experience;  
    10.       
    11.     @Override  
    12.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
    13.         View rooView=inflater.inflate(R.layout.fragment_stereoscopic_launcher, null);  
    14.         imgView_immediate_experience=(ImageView) rooView.findViewById(R.id.imgView_immediate_experience);  
    15.         imgView_immediate_experience.setOnClickListener(this);  
    16.         return rooView;  
    17.     }  
    18.       
    19.     public void playHeartbeatAnimation(){  
    20.             /** 
    21.              * 放大动画 
    22.              */  
    23.         AnimationSet animationSet = new AnimationSet(true);  
    24.         animationSet.addAnimation(new ScaleAnimation(ZOOM_MIN, ZOOM_MAX, ZOOM_MIN, ZOOM_MAX, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f));  
    25.         animationSet.addAnimation(new AlphaAnimation(1.0f, 0.8f));  
    26.    
    27.         animationSet.setDuration(500);  
    28.         animationSet.setInterpolator(new AccelerateInterpolator());  
    29.         animationSet.setFillAfter(true);  
    30.    
    31.         animationSet.setAnimationListener(new AnimationListener() {  
    32.             @Override  
    33.             public void onAnimationStart(Animation animation) {  
    34.             }  
    35.    
    36.             @Override  
    37.             public void onAnimationRepeat(Animation animation) {  
    38.             }  
    39.    
    40.             @Override  
    41.             public void onAnimationEnd(Animation animation) {  
    42.                     /** 
    43.                      * 缩小动画 
    44.                      */  
    45.                 AnimationSet animationSet = new AnimationSet(true);  
    46.                 animationSet.addAnimation(new ScaleAnimation(ZOOM_MAX, ZOOM_MIN, ZOOM_MAX,ZOOM_MIN, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f));  
    47.                 animationSet.addAnimation(new AlphaAnimation(0.8f, 1.0f));  
    48.                 animationSet.setDuration(600);  
    49.                 animationSet.setInterpolator(new DecelerateInterpolator());  
    50.                 animationSet.setFillAfter(false);  
    51.                  // 实现心跳的View  
    52.                 imgView_immediate_experience.startAnimation(animationSet);  
    53.             }  
    54.         });  
    55.          // 实现心跳的View  
    56.         imgView_immediate_experience.startAnimation(animationSet);  
    57.     }   
    58.   
    59.     @Override  
    60.     public void onClick(View v) {  
    61. //      Intent intent = new Intent();  
    62. //      intent.setClass(getActivity(),MainActivity.class);  
    63. //      startActivity(intent);  
    64. //      getActivity().finish();  
    65.     }  
    66.   
    67.     @Override  
    68.     public void startAnimation() {  
    69.         playHeartbeatAnimation();  
    70.     }  
    71.   
    72.     @Override  
    73.     public void stopAnimation() {  
    74.           
    75.     }  
    76. }  

     

    最后总结:以上就是三个引导页的核心代码了,还有一些布局文件,动画效果的布局文件我就不一一贴出来的,大家可以去下载我的源码,在这个过程中碰到的几个大的问题说明一下.

    1.viewpager切换的时候要结束上个fragment的动画   我是通过boolean变量去控制的

    2.背景图片移动的效果    之前自己走了很多弯路,后面在网上找了一个demo拿过来用了.因为大家都有开源精神所以这里省了很多功夫

    3.图片放大缩小以前居然不知道一个xml动画布局就能搞定.之前一直想办法用两个动画实现

     

    看看时间一篇博客写了一个半小时,都12点了,办公室一个人敲打着键盘,记录着这两天做过的东西,才发现这也是一件很惬意的事情。。。。闪人。。。回家.
     

    推荐下自己创建的android QQ群:202928390 欢迎大家的加入.

     

    点击下载源码

     

     

    来源:http://www.cnblogs.com/yishaochu/p/5078577.html

    展开全文
  •  这是一个非常简单又简单布丁动画,我们可以在很多手机APP里头都看见过这场动画,,印象最深就是安卓手机发射火箭时候清除缓存时所做动画,首先我们来分析一下这个动画是怎么做,我做动画前都有一个习惯,就是...
  • app引导页(背景图片切换加各个页面动画效果)

    万次阅读 多人点赞 2015-08-27 23:40:05
    前言:不知不觉中又加班到了10点半,整个启动页面了一天多时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦...
  • 用了 sliding_menu 侧滑栏。大致是这样: 主页: 注册功能用手机的本地数据库,可以换成云数据库,自行编写。...但是都挺基础,好像网上都有模板,结果我自己做的原生开发,就嗯,仅当写着来玩玩。 ...
  • 随着科技的发展,手机的功能也是越来越强大,性能也越来越好,更多的是很多手机移动端的APP也逐渐被开发出来,越来越多强大好用的手机APP都能安装到我们的手机上。而今天我为大家分享的就是几个非常良心的手机APP。 ...
  • · 由于项目是移动端,电脑访问时可以切换成手机端 · 播放页面其实没有根据B站移动端来, 比较粗糙? · ?源码地址 (欢迎Star) · ?在线预览 项目描述 前端部分 实现Swiper, Toast, Indicator组件 来自Mint-ui ...
  • 前言:不知不觉中又加班到了10点半,整个启动页面了一天多时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦...
  • 从事视频编辑4年多, 一直视频编辑SDK, 积累了大量的做视频编辑APP的客户, 自己手机里装了很多视频编辑APP,是这个行业从业人员. 对整个产品有一些认识, 谈谈自己认识; 这里主要谈视频编辑功能, 就是普通用户用...
  • 作为动画一部分 3ds 文件发挥了重要作用,因为它是使用图像文件。 该项目使用户能够了解 VR Cardboard 使用及其功能。 笔记 - 这部史诗般作品因多个事件而出现。 首先,在Android Emulator中出现了对硬件...
  • 实习期间做的一个项目,项目主要功能是提供动态锁屏壁纸,并实现手势...壁纸资源基于Lottie动画,项目还实现了可以从手机资源库中读取Lottiejson文件,可以从网上下载Lottie资源json文件,从而可设为手机的锁屏。
  • 前言:这几天客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的心态,想用你的app,却是因为你的技术问题,让他们不得不放弃,而你一个回访电话却让他们尽释前嫌,当最后把手机号留给他们以便随时...
  • 毕业设计中用到了一些动画效果,个人感觉还是蛮有用。...我们手机通常自带切换效果就是当前界面成界面宽高比例向中间缩小至消失,说实话,看多了,也会觉得很low,所以各大APP动画效果上了些设计。我们知道普遍
  • 想到以前在github上看到的daimajia的一个专注动画视频模仿的App(https://github.com/daimajia/AnimeTaste)的实现,想借鉴借鉴思路。本文的实习是在daimajia的下载模块的基础上实现爱奇艺的视频下载效果。下面来...
  • uniapp 了个h5小商城,详情页结构相对比较复杂,包含了幻灯,评价,购买人,都在不停切换,popup 过度效果,还有一个差不多毫秒级别 倒计时抢购(很多页面都有倒计时)基本结构如下图:在别的手机上还好,...
  • 从一个Activity A跳转到另外一个Activity B,B页面从一个自定义的动画中出现,生活中常见的app都会自定义一个动画,也有的是手机里面定制好的原生动画,这里只谈加载B页面时的动画,A页面动画不理会,那么这样就...
  • 1、公司测试机是 p20 青春版,进入启动页动画前有一段时间空白(其他性能比较好的手机则没有这个问题),所以就决定自己研究一下启动页优化相关内容。(方法都是百度来,这里一个总结) (1)有说 Glide ...
  • 安卓设置Activity切换动画无效问题

    千次阅读 2014-09-04 20:41:18
    有次做App想设置Activity切换动画时,只能用Window,怎么都不行,还怀疑是手机的问题 后来参考了别人程序,发现就是那么设置,于是新建了一个项目,再次尝试竟然就可以了 终于找到了原因,我用...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 185
精华内容 74
关键字:

手机做动画的app