最后就是通过我们外部的控制来实现小太阳的动

作者:118kjcom开奖现场

最近在使用某一款天气软件的时候发现了它的一个日出日落的动画,感觉还不错,后面就自己动手撸了一个源码地址。

最近在写一个相册的demo,偶尔看到了美拍的相机过载动画觉得很有意思,就想在我的相册demo中加入一个这种特效,下面把我的想法和实现过程给大家分享一下

我们先对这个动画元素进行分析:

先上效果图:(demo地址)

  1. 需要一条曲线。
  2. 需要一个沿着曲线运动的小太阳。
  3. 需要一个跟着太阳一起运动的阴影面。

图片 1

首先我们定义一个自定义View,然后初始化一些我们上面分析到的元素

效果图

 //曲线初始化 mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPathPaint.setStyle(Paint.Style.STROKE); mPathPaint.setStrokeWidth; mPathPaint.setColor(Color.parseColor("#ffffff")); PathEffect effects = new DashPathEffect(new float[]{10, 10, 10, 10}, 0); mPathPaint.setPathEffect; //日出动画阴影部分初始化 mAnmationPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mAnmationPaint.setStyle(Paint.Style.FILL_AND_STROKE); mAnmationPaint.setColor(Color.parseColor("#32ffffff")); //开始坐标的XY mStartPointX = dp2px; mStartPointY = dp2px; //结束坐标的XY mEndPointX = dp2px; mEndPointY = mStartPointY; //太阳的移动坐标的XY mMovePointX = mStartPointX; mMovePointY = mStartPointY; //圆的半径 mRadius = dp2px; //圆心坐标 mCirclePointX = dp2px; mCirclePointY = dp2px; //圆的初始化 mRectF = new RectF(mCirclePointX - mRadius, mCirclePointY - mRadius, mCirclePointX + mRadius, mCirclePointY + mRadius);

步骤分析

这个动效看起来很有特色但是实现起来是非常简单的,只需要用到CALayerCAShapeLayer做为展示层,然后通过CABasicAnimation实现动画就行了~

  • 用两个CALayer来呈现启动的image
  • 通过UIBezierPathCAShapeLayer来画出具有曲线的CAShapeLayer
  • 然后将曲线的CAShapeLayer做为CALayer的mask
  • 最后通过CABasicAnimation做一个简单的位移动画

接下来就是我们绘制的代码

先绘制上半部分的layer

/**
     绘制上半部分的layer
     */
    private func configTopShapeLayer() {
        //绘制贝斯尔曲线
        let topBezier:UIBezierPath = UIBezierPath()
        topBezier.moveToPoint(CGPointMake(-1, -1))
        topBezier.addLineToPoint(CGPointMake(bounds.width+1, -1))
        topBezier.addCurveToPoint(CGPointMake(bounds.width/2.0+1, bounds.height/2.0+1), controlPoint1: CGPointMake(bounds.width+1, 0+1), controlPoint2: CGPointMake(343.5+1, 242.5+1))
        topBezier.addCurveToPoint(CGPointMake(-1, bounds.height+2), controlPoint1: CGPointMake(31.5+2, 424.5+2), controlPoint2: CGPointMake(0+2, bounds.height+2))
        topBezier.addLineToPoint(CGPointMake(-1, -1))
        topBezier.closePath()
        //创建一个CAShapeLayer,将绘制的贝斯尔曲线的path给CAShapeLayer
        let topShape = CAShapeLayer()
        topShape.path = topBezier.CGPath
        //给topLayer设置contents为启动图
        topLayer.contents = launchImage?.CGImage
        topLayer.frame = bounds
        layer.addSublayer(topLayer)
        //将绘制后的CAShapeLayer做为topLayer的mask
        topLayer.mask = topShape
    }

绘制后的结果是这样的:

图片 2

绘制后的结果

if (isNeedSun) { //画曲线 canvas.save(); canvas.clipRect(mStartPointX, 0, mEndPointX, mStartPointY, Region.Op.INTERSECT); canvas.clipRect(mMovePointX - mBitmapW / 2, mMovePointY - mBitmapH / 2, mMovePointX + mBitmapW / 2, mMovePointY + mBitmapH / 2, Region.Op.DIFFERENCE); canvas.drawArc(mRectF, 200, 140, true, mPathPaint); //画透明背景用圆的角度来控制 canvas.clipRect(mStartPointX, 0, mMovePointX, mStartPointY, Region.Op.INTERSECT); canvas.drawArc(mRectF, 200, 140, true, mAnmationPaint); canvas.restore(); //画小太阳 canvas.drawBitmap(mSunBitmap, mMovePointX - mBitmapW, mMovePointY - mBitmapH, null); } else if (mNotUp || mHasDown) { //画曲线 canvas.save(); canvas.clipRect(mMovePointX - mBitmapW / 2, mMovePointY - mBitmapH / 2, mMovePointX + mBitmapW / 2, mMovePointY + mBitmapH / 2, Region.Op.DIFFERENCE); canvas.clipRect(0, 0, getWidth(), mStartPointY, Region.Op.INTERSECT); canvas.drawCircle(mCirclePointX, mCirclePointY, mRadius, mPathPaint); canvas.restore(); if  { //画小太阳 canvas.drawBitmap(mSunBitmap, mStartPointX - mBitmapW, mStartPointY - mBitmapH, null); } else { canvas.drawBitmap(mSunBitmap, mEndPointX - mBitmapW, mEndPointY - mBitmapH, null); } } else { //这里不绘制小太阳,只有曲线 canvas.save(); canvas.clipRect(0, 0, getWidth(), mStartPointY, Region.Op.INTERSECT); canvas.drawCircle(mCirclePointX, mCirclePointY, mRadius, mPathPaint); canvas.restore(); }

然后以同样的原理绘制下半部分的layer

/**
     绘制下半部分的layer
     */
    private func configBottomShapeLayer() {
        //绘制贝斯尔曲线
        let bottomBezier:UIBezierPath = UIBezierPath()
        bottomBezier.moveToPoint(CGPointMake(bounds.width, 0))
        bottomBezier.addCurveToPoint(CGPointMake(bounds.width/2.0, bounds.height/2.0), controlPoint1: CGPointMake(bounds.width, 0), controlPoint2: CGPointMake(343.5, 242.5))
        bottomBezier.addCurveToPoint(CGPointMake(0, bounds.height), controlPoint1: CGPointMake(31.5, 424.5), controlPoint2: CGPointMake(0, bounds.height))
        bottomBezier.addLineToPoint(CGPointMake(bounds.width, bounds.height))
        bottomBezier.addLineToPoint(CGPointMake(bounds.width, 0))
        bottomBezier.closePath()
        //创建一个CAShapeLayer,将绘制的贝斯尔曲线的path给CAShapeLayer
        let bottomShape = CAShapeLayer()
        bottomShape.path = bottomBezier.CGPath
        //给bottomLayer设置contents为启动图
        bottomLayer.contents = launchImage?.CGImage
        bottomLayer.frame = bounds
        layer.addSublayer(bottomLayer)
        //将绘制后的CAShapeLayer做为bottomLayer的mask
        bottomLayer.mask = bottomShape
    }

这里注意的是画的贝斯尔曲线上半部分的要整体向下平移1到2个像素,为了防止贝斯尔曲线画曲线导致的锯齿效果,下面是下半部分完成后的效果图:

图片 3

这里写图片描述

最后就是通过我们外部的控制来实现小太阳的动画

最后给两个layer一个位移动画

/**
     展开的动画
     */
    func starAnimation() {
        //创建一个CABasicAnimation作用于CALayer的anchorPoint
        let topAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
        //设置移动路径
        topAnimation.toValue = NSValue.init(CGPoint: CGPointMake(1, 1))
        //动画时间
        topAnimation.duration = 0.6
        //设置代理,方便完成动画后移除当前view
        topAnimation.delegate = self
        //设置动画速度为匀速
        topAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
        //设置动画结束后不移除点,保持移动后的位置
        topAnimation.removedOnCompletion = false
        topAnimation.fillMode = kCAFillModeForwards
        topLayer.addAnimation(topAnimation, forKey: "topAnimation")

        //创建一个CABasicAnimation作用于CALayer的anchorPoint
        let bottomAnimation = CABasicAnimation.init(keyPath: "anchorPoint")
        //设置移动路径
        bottomAnimation.toValue = NSValue.init(CGPoint: CGPointMake(0, 0))
        //动画时间
        bottomAnimation.duration = 0.6
        //设置动画速度为匀速
        bottomAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionLinear)
        //设置动画结束后不移除点,保持移动后的位置
        bottomAnimation.removedOnCompletion = false
        bottomAnimation.fillMode = kCAFillModeForwards
        bottomLayer.addAnimation(bottomAnimation, forKey: "topAnimation")
    }

        /**
     动画完成后移除当前view
     */
    internal override func animationDidStop(anim: CAAnimation, finished flag: Bool)           
    {
        if flag {
            removeFromSuperview()
        }
    }

这里为了方便观察,我将动画时间变长了,下面是完成后的效果图:

图片 4

这里写图片描述

到这里这个动效就完成的差不多了,希望大家能学到东西,如果大家有更好的实现办法也可以给我提意见,我学习学习,谢谢大家观看,另外附加demo地址,喜欢的可以关注一下

mSunBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.daily_deatil_sun); mBitmapW = mSunBitmap.getWidth() / 2; mBitmapH = mSunBitmap.getHeight() / 2; mNotUp = false; isNeedSun = true; mHasDown = false; ValueAnimator progressAnimator = ValueAnimator.ofFloat; progressAnimator.setDuration; progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { /**每次在初始值和结束值之间产生的一个平滑过渡的值,逐步去更新进度*/ float x =  animation.getAnimatedValue(); if  <=  { mMovePointX = mCirclePointX +  (mRadius * (Math.cos(x * 3.14 / 180))); mMovePointY = mCirclePointY +  (mRadius * (Math.sin(x * 3.14 / 180))); invalidate(); } else { return; } } }); progressAnimator.setInterpolator(new LinearInterpolator; progressAnimator.start();

最后附上源码地址和简单看一下效果图:

图片 5曲线效果图

本文由118kjcom最快开奖现场发布,转载请注明来源

关键词: