闪烁的 ios 动画
glitchy ios animations with flashes
制作一个 iOS 应用程序,当我 运行 模拟器上的代码时,故障是可以容忍的,但在 iPhone 上测试时,它们更加明显。我正在使用 JHChainableAnimations 来制作它们,并且动画在屏幕上滞后并闪烁。我会 post 一张图片,但我不确定如何上传发生了什么的 gif。
我研究了解决这些问题的方法,我发现的解决方案是我的背景被设置为一种颜色,我应该使用慢速动画来解决这个问题,但这两者都不符合要求。视图中的背景颜色为零,慢速动画不起作用(我假设是因为 JHChainableAnimations 不允许慢动作动画)
如果这个问题是框架问题而不是其他问题,那么我很乐意为 pod 提供关于好的动画框架的建议!
代码图片如下:
Declarations in Class
viewDidLoad() part 1 and viewDidLoad() part 2
这是动画代码:
一堆代码 circles collapse
使 check mark slide 从按钮后面弹出以确认选择的代码
最后是单击 start/action 按钮时发生的主要动画代码 part 1 and part 2
编辑:
以下是代码的一些重要部分,没有按要求提供图像:
收起圈子:
@objc func animateCircleClose() {
guard let circle1Animator = circle1Animator else {
return
}
guard let circle2Animator = circle2Animator else {
return
}
guard let circle3Animator = circle3Animator else {
return
}
guard let circle4Animator = circle4Animator else {
return
}
guard let circle5Animator = circle5Animator else {
return
}
guard let topanimator = topanimator else {
return
}
guard let botanimator = botanimator else {
return
}
circle1Animator.make(scale: 0).animate(t: 0.8);
circle2Animator.thenAfter(t: 0.2).make(scale: 0).animate(t: 0.4);
circle3Animator.thenAfter(t: 0.4).make(scale: 0).animate(t: 0.4);
circle4Animator.thenAfter(t: 0.6).make(scale: 0).animate(t: 0.4);
circle5Animator.thenAfter(t: 0.8).make(scale: 0).animate(t: 0.4);
botanimator.thenAfter(t: 1.2).move(y: -300).easeInBack.animate(t: 0.3);
topanimator.thenAfter(t: 1.2).move(y: -300).easeInBack.animate(t: 0.3);
}
这是按钮动画:
@objc func animateHappyButton() {
guard let happyBackingAnimator = happyBackingAnimator else {
return
}
if(!selected){
happyBacking.isHidden = false;
happyBackingAnimator.move(x: -20).easeOut.animate(t: 0.3);
selected = true;
selectedHappy = true;
}
else if(selectedHappy){
happyBackingAnimator.move(x: 20).easeOut.animate(t: 0.3);
selected = false;
happyBacking.isHidden = true;
selectedHappy = false;
}
else{
if(selectedWorried){
animateWorriedButton();
}
if(selectedSad){
animateSadButton();
}
if(selectedExcited){
animateExcitedButton();
}
happyBacking.isHidden = false;
happyBackingAnimator.move(x: -20).easeOut.animate(t: 0.3);
selected = true;
selectedHappy = true;
}
}
这里是主要的动画函数,为了您的眼睛,我省略了所有的 guard let 语句,但是您可以在屏幕截图中看到它们
@objc func animateView() {
circle1Animator.make(scale: 0.1).animate(t: 0);
circle2Animator.make(scale: 0.1).animate(t: 0);
circle3Animator.make(scale: 0.1).animate(t: 0);
circle4Animator.make(scale: 0.1).animate(t: 0);
circle5Animator.make(scale: 0.1).animate(t: 0);
button.isUserInteractionEnabled = false
let buttonAnimator = ChainableAnimator(view: button)
topanimator.completion = { [unowned self] in
self.circle1.isHidden = false;
self.circle2.isHidden = false;
self.circle3.isHidden = false;
self.circle4.isHidden = false;
self.circle5.isHidden = false;
self.excitedButton.isHidden = false;
self.happyButton.isHidden = false;
self.sadButton.isHidden = false;
self.worriedButton.isHidden = false;
circle1Animator.make(scale: 10).easeOut.animate(t: 1);
circle2Animator.make(scale: 10).easeOut.animate(t: 1);
circle3Animator.make(scale: 10).easeOut.animate(t: 1);
circle4Animator.make(scale: 10).easeOut.animate(t: 1);
circle5Animator.make(scale: 10).easeOut.animate(t: 1);
happyAnimator.move(x: -245).easeOut.animate(t: 0.3);
excitedAnimator.thenAfter(t: 0.2).move(x: -245).easeOut.animate(t: 0.3);
worriedAnimator.thenAfter(t: 0.4).move(x: -245).easeOut.animate(t: 0.3);
sadAnimator.thenAfter(t: 0.6).move(x: -245).easeOut.animate(t: 0.3);
self.tagMood.isHidden = false;
}
buttonAnimator.move(y: 50).easeInOutExpo.animate(t: 0.5)
topimg.isHidden = false;
botimg.isHidden = false;
botanimator.move(y: -458).easeOutQuart.animate(t: 0.3);
topanimator.move(y: 228).easeOutQuart.animate(t: 0.3);
worriedAnimator.move(x: 285).animate(t: 0);
excitedAnimator.move(x: 285).animate(t: 0);
happyAnimator.move(x: 285).animate(t: 0);
sadAnimator.move(x: 285).animate(t: 0);
}
所以问题出在具体的框架上,当使用 JHChainableAnimations 时,您需要专门使用以下内容进行 pod:
pod 'ChainableAnimations', :git => 'https://github.com/jhurray/JHChainableAnimations.git', :commit => '6488b3b6ff3c233013056802361d72be7f77d3ed'
它自己的 repo 没有正确更新来解决这个问题,但是将上面的内容放在你的 podfile 中会解决它
制作一个 iOS 应用程序,当我 运行 模拟器上的代码时,故障是可以容忍的,但在 iPhone 上测试时,它们更加明显。我正在使用 JHChainableAnimations 来制作它们,并且动画在屏幕上滞后并闪烁。我会 post 一张图片,但我不确定如何上传发生了什么的 gif。
我研究了解决这些问题的方法,我发现的解决方案是我的背景被设置为一种颜色,我应该使用慢速动画来解决这个问题,但这两者都不符合要求。视图中的背景颜色为零,慢速动画不起作用(我假设是因为 JHChainableAnimations 不允许慢动作动画)
如果这个问题是框架问题而不是其他问题,那么我很乐意为 pod 提供关于好的动画框架的建议!
代码图片如下:
Declarations in Class
viewDidLoad() part 1 and viewDidLoad() part 2
这是动画代码:
一堆代码 circles collapse
使 check mark slide 从按钮后面弹出以确认选择的代码
最后是单击 start/action 按钮时发生的主要动画代码 part 1 and part 2
编辑: 以下是代码的一些重要部分,没有按要求提供图像:
收起圈子:
@objc func animateCircleClose() {
guard let circle1Animator = circle1Animator else {
return
}
guard let circle2Animator = circle2Animator else {
return
}
guard let circle3Animator = circle3Animator else {
return
}
guard let circle4Animator = circle4Animator else {
return
}
guard let circle5Animator = circle5Animator else {
return
}
guard let topanimator = topanimator else {
return
}
guard let botanimator = botanimator else {
return
}
circle1Animator.make(scale: 0).animate(t: 0.8);
circle2Animator.thenAfter(t: 0.2).make(scale: 0).animate(t: 0.4);
circle3Animator.thenAfter(t: 0.4).make(scale: 0).animate(t: 0.4);
circle4Animator.thenAfter(t: 0.6).make(scale: 0).animate(t: 0.4);
circle5Animator.thenAfter(t: 0.8).make(scale: 0).animate(t: 0.4);
botanimator.thenAfter(t: 1.2).move(y: -300).easeInBack.animate(t: 0.3);
topanimator.thenAfter(t: 1.2).move(y: -300).easeInBack.animate(t: 0.3);
}
这是按钮动画:
@objc func animateHappyButton() {
guard let happyBackingAnimator = happyBackingAnimator else {
return
}
if(!selected){
happyBacking.isHidden = false;
happyBackingAnimator.move(x: -20).easeOut.animate(t: 0.3);
selected = true;
selectedHappy = true;
}
else if(selectedHappy){
happyBackingAnimator.move(x: 20).easeOut.animate(t: 0.3);
selected = false;
happyBacking.isHidden = true;
selectedHappy = false;
}
else{
if(selectedWorried){
animateWorriedButton();
}
if(selectedSad){
animateSadButton();
}
if(selectedExcited){
animateExcitedButton();
}
happyBacking.isHidden = false;
happyBackingAnimator.move(x: -20).easeOut.animate(t: 0.3);
selected = true;
selectedHappy = true;
}
}
这里是主要的动画函数,为了您的眼睛,我省略了所有的 guard let 语句,但是您可以在屏幕截图中看到它们
@objc func animateView() {
circle1Animator.make(scale: 0.1).animate(t: 0);
circle2Animator.make(scale: 0.1).animate(t: 0);
circle3Animator.make(scale: 0.1).animate(t: 0);
circle4Animator.make(scale: 0.1).animate(t: 0);
circle5Animator.make(scale: 0.1).animate(t: 0);
button.isUserInteractionEnabled = false
let buttonAnimator = ChainableAnimator(view: button)
topanimator.completion = { [unowned self] in
self.circle1.isHidden = false;
self.circle2.isHidden = false;
self.circle3.isHidden = false;
self.circle4.isHidden = false;
self.circle5.isHidden = false;
self.excitedButton.isHidden = false;
self.happyButton.isHidden = false;
self.sadButton.isHidden = false;
self.worriedButton.isHidden = false;
circle1Animator.make(scale: 10).easeOut.animate(t: 1);
circle2Animator.make(scale: 10).easeOut.animate(t: 1);
circle3Animator.make(scale: 10).easeOut.animate(t: 1);
circle4Animator.make(scale: 10).easeOut.animate(t: 1);
circle5Animator.make(scale: 10).easeOut.animate(t: 1);
happyAnimator.move(x: -245).easeOut.animate(t: 0.3);
excitedAnimator.thenAfter(t: 0.2).move(x: -245).easeOut.animate(t: 0.3);
worriedAnimator.thenAfter(t: 0.4).move(x: -245).easeOut.animate(t: 0.3);
sadAnimator.thenAfter(t: 0.6).move(x: -245).easeOut.animate(t: 0.3);
self.tagMood.isHidden = false;
}
buttonAnimator.move(y: 50).easeInOutExpo.animate(t: 0.5)
topimg.isHidden = false;
botimg.isHidden = false;
botanimator.move(y: -458).easeOutQuart.animate(t: 0.3);
topanimator.move(y: 228).easeOutQuart.animate(t: 0.3);
worriedAnimator.move(x: 285).animate(t: 0);
excitedAnimator.move(x: 285).animate(t: 0);
happyAnimator.move(x: 285).animate(t: 0);
sadAnimator.move(x: 285).animate(t: 0);
}
所以问题出在具体的框架上,当使用 JHChainableAnimations 时,您需要专门使用以下内容进行 pod:
pod 'ChainableAnimations', :git => 'https://github.com/jhurray/JHChainableAnimations.git', :commit => '6488b3b6ff3c233013056802361d72be7f77d3ed'
它自己的 repo 没有正确更新来解决这个问题,但是将上面的内容放在你的 podfile 中会解决它