UImageView翻转效果


感觉这个效果简单,但是还不错,主要还是用了在动画执行到一半的时候马上切换图片.就会达到这样的效果了.

当然之前必须设置UIImageView可以点击userInteractionEnabled为YES

关键代码如下:

- (void)viewDidLoad

{

    [super viewDidLoad];

    self.imageView.userInteractionEnabled = YES;

    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(clickImage)];

    [self.imageView addGestureRecognizer:tapGesture];

    

}

- (void)clickImage{

    

    // 标记翻转状态

    self.isChanged = !self.isChanged;

    

    // 动画配置

    NSTimeInterval duration = 0.5;

    UIViewAnimationTransition transition = self.isChanged ? UIViewAnimationTransitionFlipFromRight : UIViewAnimationTransitionFlipFromLeft;

    

    // 提交动画

    [UIView beginAnimations:nil context:nil];

    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

    [UIView setAnimationDuration:duration];

    [UIView setAnimationTransition:transition forView:self.imageView cache:NO];

    [UIView commitAnimations];

    

    // 动画进行到一半,设置图片.关键点

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration/2.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^

                   {

                       self.imageView.image = [UIImage imageNamed: self.isChanged ? @"1" : @"2" ];

                   });


}



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现图片翻转效果可以使用Vue的动画特性和CSS3的3D变换效果。下面是一个简单的例子,你可以根据自己的需求进行修改和扩展。 首先,我们需要在Vue组件中定义两个状态:正面和反面,并且使用`v-bind:class`来动态绑定组件的类名。然后,我们可以使用Vue的`transition`组件来定义动画的效果,如下所示: ```html <template> <div class="flip-container" @click="isFlipped = !isFlipped"> <div class="flipper" :class="{ flipped: isFlipped }"> <div class="front"> <img src="image.jpg"> </div> <div class="back"> <img src="image-flipped.jpg"> </div> </div> </div> </template> <script> export default { data() { return { isFlipped: false } } } </script> <style> .flip-container { perspective: 1000px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .back { transform: rotateY(180deg); } .flipped { transform: rotateY(180deg); } </style> ``` 在上面的代码中,我们使用了CSS3的`perspective`属性来指定3D场景的观察距离,使得图片看起来更加逼真。然后,我们定义了两个状态:正面和反面,并且使用`v-bind:class`来动态绑定组件的类名。最后,我们使用了`transition`组件来定义动画的效果,并且使用`transform`属性来实现3D翻转效果。 你可以根据自己的需求修改和扩展上面的代码,来实现更加复杂的图片翻转效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值