iPhone 闪耀动画

Posted 2023-03-10

【中文标题】iPhone 闪耀动画

【英文标题】：iPhone shine animation

【发布时间】：2011-07-03 18:20:19

【问题描述】：

我试图让我的视图做一个漂亮的闪亮动画来吸引用户的眼球。有什么想法可以实现吗？

这是我目前所拥有的：

[UIView beginAnimations:@"viewShine" context:self.view];
[UIView setAnimationRepeatAutoreverses:NO];
[UIView setAnimationRepeatCount:0];
[UIView setAnimationDuration:2];
[UIView setAnimationDelegate:self];
//Do nice shining animation here
[UIView commitAnimations];

我所说的闪耀我的意思是当你打开 iPhone 时“滑动解锁”文本会发生什么，或者任何易于操作且看起来不错的东西。

【问题讨论】：

“闪耀”对您意味着什么？

老实说，它究竟做了什么并不重要，只是它看起来不错并吸引了用户的眼球。我会想象当您打开 iPhone 时“滑动解锁”文本会发生什么情况。

【参考方案1】：

我编写了一个可以在任何 UIView 上调用的方法，以使其在不需要包含图像的情况下获得您正在寻找的光芒：

-(void)AddShineAnimationToView:(UIView*)aView

    CAGradientLayer *gradient = [CAGradientLayer layer];
    [gradient setStartPoint:CGPointMake(0, 0)];
    [gradient setEndPoint:CGPointMake(1, 0)];
    gradient.frame = CGRectMake(0, 0, aView.bounds.size.width*3, aView.bounds.size.height);
    float lowerAlpha = 0.78;
    gradient.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
                       (id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
                       (id)[[UIColor colorWithWhite:1 alpha:1.0] CGColor],
                       (id)[[UIColor colorWithWhite:1 alpha:1.0] CGColor],
                       (id)[[UIColor colorWithWhite:1 alpha:1.0] CGColor],
                       (id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
                       (id)[[UIColor colorWithWhite:1 alpha:lowerAlpha] CGColor],
                       nil];
    gradient.locations = [NSArray arrayWithObjects:
                          [NSNumber numberWithFloat:0.0],
                          [NSNumber numberWithFloat:0.4],
                          [NSNumber numberWithFloat:0.45],
                          [NSNumber numberWithFloat:0.5],
                          [NSNumber numberWithFloat:0.55],
                          [NSNumber numberWithFloat:0.6],
                          [NSNumber numberWithFloat:1.0],
                          nil];

    CABasicAnimation *theAnimation;
    theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    theAnimation.duration = 2;
    theAnimation.repeatCount = INFINITY;
    theAnimation.autoreverses = NO;
    theAnimation.removedOnCompletion = NO;
    theAnimation.fillMode = kCAFillModeForwards;
    theAnimation.fromValue=[NSNumber numberWithFloat:-aView.frame.size.width*2];
    theAnimation.toValue=[NSNumber numberWithFloat:0];
    [gradient addAnimation:theAnimation forKey:@"animateLayer"];

    aView.layer.mask = gradient;

【讨论】：

但是在这个 CABasicAnimation 之后，我怎样才能回到原来的视图？

【参考方案2】：

想通了。

如果你想做类似的事情，这是我的代码：

UIView *whiteView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[whiteView setBackgroundColor:[UIColor whiteColor]];
[whiteView setUserInteractionEnabled:NO];
[self.view addSubview:whiteView];

CALayer *maskLayer = [CALayer layer];

// Mask image ends with 0.15 opacity on both sides. Set the background color of the layer
// to the same value so the layer can extend the mask image.
maskLayer.backgroundColor = [[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.0f] CGColor];
maskLayer.contents = (id)[[UIImage imageNamed:@"ShineMask.png"] CGImage];

// Center the mask image on twice the width of the text layer, so it starts to the left
// of the text layer and moves to its right when we translate it by width.
maskLayer.contentsGravity = kCAGravityCenter;
maskLayer.frame = CGRectMake(-whiteView.frame.size.width, 
                             0.0f, 
                             whiteView.frame.size.width * 2, 
                             whiteView.frame.size.height);

// Animate the mask layer's horizontal position
CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@"position.x"];
maskAnim.byValue = [NSNumber numberWithFloat:self.view.frame.size.width * 9];
maskAnim.repeatCount = HUGE_VALF;
maskAnim.duration = 3.0f;
[maskLayer addAnimation:maskAnim forKey:@"shineAnim"];

whiteView.layer.mask = maskLayer;

使用这张图片：

【讨论】：

另见***.com/questions/438046/…

【参考方案3】：

这是发光效果的快速代码

class Animate 

    /// Add a persistent shimmer animation. Usage: `Animate.shimmer(myView)`
    static func shimmer(view: UIView) 
      let gradient = CAGradientLayer()
      gradient.startPoint = CGPointMake(0, 0)
      gradient.endPoint = CGPointMake(1, -0.02)
      gradient.frame = CGRectMake(0, 0, view.bounds.size.width*3, view.bounds.size.height)

      let lowerAlpha: CGFloat = 0.7
      let solid = UIColor(white: 1, alpha: 1).CGColor
      let clear = UIColor(white: 1, alpha: lowerAlpha).CGColor
      gradient.colors     = [ solid, solid, clear, clear, solid, solid ]
      gradient.locations  = [ 0,     0.3,   0.45,  0.55,  0.7,   1     ]

      let theAnimation : CABasicAnimation = CABasicAnimation(keyPath: "transform.translation.x")
      theAnimation.duration = 4
      theAnimation.repeatCount = Float.infinity
      theAnimation.autoreverses = false
      theAnimation.removedOnCompletion = false
      theAnimation.fillMode = kCAFillModeForwards
      theAnimation.fromValue = -view.frame.size.width * 2
      theAnimation.toValue =  0
      gradient.addAnimation(theAnimation, forKey: "animateLayer")

      view.layer.mask = gradient

    

Swift 3.0

func shimmer(view: UIView) 
        let gradient = CAGradientLayer()
        gradient.startPoint = CGPoint(x: 0, y: 0)
        gradient.endPoint = CGPoint(x: 1, y: -0.02)
        gradient.frame = CGRect(x: 0, y: 0, width: view.bounds.size.width*3, height: view.bounds.size.height)

        let lowerAlpha: CGFloat = 0.7
        let solid = UIColor(white: 1, alpha: 1).cgColor
        let clear = UIColor(white: 1, alpha: lowerAlpha).cgColor
        gradient.colors     = [ solid, solid, clear, clear, solid, solid ]
        gradient.locations  = [ 0,     0.3,   0.45,  0.55,  0.7,   1     ]

        let theAnimation : CABasicAnimation = CABasicAnimation(keyPath: "transform.translation.x")
        theAnimation.duration = 2
        theAnimation.repeatCount = Float.infinity
        theAnimation.autoreverses = false
        theAnimation.isRemovedOnCompletion = false
        theAnimation.fillMode = kCAFillModeForwards
        theAnimation.fromValue = -view.frame.size.width * 2
        theAnimation.toValue =  0
        gradient.add(theAnimation, forKey: "animateLayer")

        view.layer.mask = gradient
    

【参考方案4】：

可能值得一提的是：如果是闪亮的进度标签，例如在 Facebook 纸质应用或 ios 锁屏中，您可以考虑使用https://github.com/facebook/Shimmer。

【讨论】：

老兄，这是 3 岁。为什么要添加不相关框架的链接？

"Chisel 是 LLDB 命令的集合，用于协助调试 iOS 应用程序。" – 你可能在那里链接了错误的项目。

等一下，我的错。粘贴了错误的链接。已编辑。

【参考方案5】：

斯威夫特 5.0

func shimmer()
    let gradient = CAGradientLayer()
    gradient.startPoint = CGPoint(x: 0, y: 0)
    gradient.endPoint = CGPoint(x: 1, y: -0.02)
    gradient.frame = CGRect(x: 0, y: 0, width: self.bounds.size.width*3, height: self.bounds.size.height)

    let lowerAlpha: CGFloat = 0.8
    let solid = UIColor(white: 1, alpha: 1).cgColor
    //let verdeVXM = UIColor(red:0.77, green:0.84, blue:0.00, alpha:1.0)
    let clear = UIColor(white: 1, alpha: lowerAlpha).cgColor
    gradient.colors     = [ solid, solid, clear, clear, solid, solid ]
    gradient.locations  = [ 0,     0.3,   0.45,  0.55,  0.7,   1     ]

    let theAnimation : CABasicAnimation = CABasicAnimation(keyPath: "transform.translation.x")
    theAnimation.duration = 2
    theAnimation.repeatCount = Float.infinity
    theAnimation.autoreverses = false
    theAnimation.isRemovedOnCompletion = false
    theAnimation.fillMode = CAMediaTimingFillMode.forwards
    theAnimation.fromValue = -self.frame.size.width * 2
    theAnimation.toValue =  0
    gradient.add(theAnimation, forKey: "animateLayer")

    self.layer.mask = gradient

【讨论】：

您可能应该稍微解释一下您的代码做了什么，而不是仅仅粘贴一个完成的代码块。 Stack Overflow 是关于学习的，而不是关于共享代码的。但是很好的实现，它很整洁。