【提示动画】左右滑动或者说左右晃动

// 利用关键帧实现一种类似(渐入)渐出的效果
    CAKeyframeAnimation *kfa = [CAKeyframeAnimation animation];
    kfa.keyPath = @"transform.translation.x";
    CGFloat s = 16;
//    kfa.values = @[@(-s),@(0),@(s),@(0),@(-s),@(0),@(s),@(0)];
    kfa.values = @[@(-16),@(0),@(12),@(0),@(-8),@(0),@(6),@(0),@(-4),@(0),@(2),@(0)];
    kfa.duration = 0.5;
    [self.privacyStackView.layer addAnimation:kfa forKey:@"shake"];



// 基本左右晃动动画 不带渐出效果
//    CABasicAnimation* shake = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
//    shake.fromValue = [NSNumber numberWithFloat:-5];
//    shake.toValue = [NSNumber numberWithFloat:5];
//    shake.duration = 0.5;//执行时间
//    shake.autoreverses = YES; //是否重复
//    shake.repeatCount = 2;//次数
//    [self.privacyStackView.layer addAnimation:shake forKey:@"shakeAnimation"];

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 CSS3 动画来实现左右滑动展示。具体步骤如下: 1. 创建 HTML 结构 首先,创建 HTML 结构,包括一个容器和两个子元素,例如: ```html <div class="container"> <div class="sidebar"></div> <div class="main-content"></div> </div> ``` 其中,.container 为容器,.sidebar 和 .main-content 为子元素,可以使用任意其他的类名。 2. 设置样式 给 .container 设置 position: relative,给 .sidebar 和 .main-content 设置 position: absolute 和 top: 0,使其覆盖在 .container 上。 ```css .container { position: relative; } .sidebar, .main-content { position: absolute; top: 0; } ``` 同时,给 .sidebar 和 .main-content 设置宽度和高度,以及需要展示的内容。 3. 添加动画 使用 CSS3 的 transition 和 transform 属性来实现动画。 先给 .container 添加 overflow: hidden,防止子元素超出容器。 ```css .container { position: relative; overflow: hidden; } ``` 然后,给 .sidebar 和 .main-content 添加 transform: translateX(-100%),让它们显示在容器外部左侧。 ```css .sidebar { width: 200px; height: 100%; transform: translateX(-100%); } .main-content { width: calc(100% - 200px); height: 100%; left: 200px; transform: translateX(-100%); } ``` 接下来,使用 JavaScript 将 .sidebar 和 .main-content 设置为可见,并且添加一个类名来触发动画。 ```css .sidebar.show, .main-content.show { transform: translateX(0); transition: transform 0.3s ease-in-out; } ``` 最后,使用 JavaScript 控制类名的切换,触发动画。 ```javascript var sidebar = document.querySelector('.sidebar'); var mainContent = document.querySelector('.main-content'); function toggleSidebar() { sidebar.classList.toggle('show'); mainContent.classList.toggle('show'); } ``` 这样就可以实现左右滑动展示了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值