Вопросы Теги

Основная анимация ключевых кадров (вращение)

SVG - лучший инструмент для таких вещей, и самым большим фактором, способствующим этому, является то, что легче создавать и поддерживать такие формы, как SVG.

Но это можно сделать с помощью CSS transform и другим способом с более простыми преобразованиями. Все, что нам нужно сделать, это использовать преобразование skew и установить угол наклона в зависимости от требуемой формы.

Для шестиугольников угол между каждой стороной составляет 120 градусов, и поэтому элементы должны быть перекошены на +/- 30 градусов. Для пятиугольников угол между каждой стороной составляет 108 градусов, и поэтому углы наклона в нижней половине будут +/- 18 градусов, но в верхней половине будет +/- 36 градусов. Для алмаза угол между каждой стороной составляет 90 градусов, и поэтому углы наклона будут +/- 45 градусов.

Несколько положительных моментов этого подхода: ( не то, что SVG не имеет этих )

  • Формы, созданные с использованием этого подхода отзывчивый ( попробуйте навести курсор на фигуры в демоверсии )
  • Преобразования довольно хорошо поддерживаются, учитывая, что IE8 находится на выходе (сами Microsoft прекращают поддержку IE8 с января '16). Это неплохо по сравнению с SVG , потому что SVG имеет такую ​​же поддержку браузера.

Существует довольно много недостатков использования CSS , хотя:

  • Для создания формы требуются дополнительные элементы.
  • Они будут работать только в IE9 + (то есть браузерах, которые поддерживают преобразования). Недостаток не в сравнении с SVG, а в целом.
  • Заполнение для области, отличной от выреза, не может быть градиентом или изображением. Это может быть только сплошной цвет.
  • Эффекты наведения могут быть добавлены (как показано в демонстрационной версии), но они будут срабатывать, когда мышь находится над областью выреза, также потому, что она все еще является частью контейнера, даже если она прозрачная. 

.shape {
  position: relative;
  height: 100px;
  border: 20px solid palevioletred;
  overflow: hidden;
}
.shape.hexagon {
  width: calc(100px + (100px * 0.577)); /* width = height + (height * tan 30) for hexagon */
}
.shape.pentagon {
  width: calc(100px * 1.051); /* width = height * 1.618/1.539 for pentagon (Source: Wiki - https://en.wikipedia.org/wiki/Pentagon */
}
.shape.diamond {
  width: 100px; /* height = width for diamond */
}
.hexagon .inner, .pentagon .inner, .diamond .inner {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0px;
  left: 85%;
}
.diamond .inner {
  left: 100%;
}
.shape:after, .shape:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 50%;
  left: -35%;
  background: palevioletred;
}
.shape.diamond:before, .shape.diamond:after {
  left: -50%;
}
.hexagon .inner:after, .hexagon .inner:before, .pentagon .inner:after,
.pentagon .inner:before, .diamond .inner:after, .diamond .inner:before {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: 0px;
  background: palevioletred;
}
.shape.hexagon:before, .hexagon .inner:after {
  transform: skew(-30deg);
}
.shape.hexagon:after, .hexagon .inner:before {
  transform: skew(30deg);
}
.shape.pentagon:before {
  transform: skew(-36deg);
}
.shape.pentagon:after{
  transform: skew(18deg);
}
.shape.diamond:before, .diamond .inner:after {
  transform: skew(-45deg);
}
.shape.diamond:after, .diamond .inner:before {
  transform: skew(45deg);
}
.pentagon .inner:before {
  transform: skew(36deg);
}
.pentagon .inner:after {
  transform: skew(-18deg);
}
.shape:before, .inner:before {
  top: 0px;
  transform-origin: right bottom;
}
.shape:after, .inner:after {
  bottom: 0px;
  transform-origin: right top;
}

/* just for demonstrating responsiveness */

.shape {
  float: left;
  margin: 10px;
  transition: all 1s linear;
}
.shape:hover{ height: 150px; }
.shape.hexagon:hover { width: calc(150px + (150px * 0.577)); }
.shape.pentagon:hover { width: calc(150px * 1.051); }
.shape.diamond:hover { width: 150px; }
body {
  background: url(http://lorempixel.com/500/500/nature/6) fixed;
  background-size: cover;
}

enter image description here

14
задан 23 June 2009 в 23:21
поделиться

2 ответа

Думаю, я понял.

Вот код, который выполняет (в этом примере) полный поворот на 270 ГРАДУСОВ (1,5 * пи радиана), включая различные параметры, которые можно настраивать дополнительно: 

CALayer *layer = rotatingImage.layer;
CAKeyframeAnimation *animation;
animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];
animation.duration = 0.5f;
animation.cumulative = YES;
animation.repeatCount = 1;
animation.values = [NSArray arrayWithObjects:       // i.e., Rotation values for the 3 keyframes, in RADIANS
      [NSNumber numberWithFloat:0.0 * M_PI], 
      [NSNumber numberWithFloat:0.75 * M_PI], 
      [NSNumber numberWithFloat:1.5 * M_PI], nil]; 
animation.keyTimes = [NSArray arrayWithObjects:     // Relative timing values for the 3 keyframes
      [NSNumber numberWithFloat:0], 
      [NSNumber numberWithFloat:.5], 
      [NSNumber numberWithFloat:1.0], nil]; 
animation.timingFunctions = [NSArray arrayWithObjects:
      [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],    // from keyframe 1 to keyframe 2
      [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], nil]; // from keyframe 2 to keyframe 3
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

[layer addAnimation:animation forKey:nil];

Спасибо!

18
ответ дан 1 December 2019 в 13:09
поделиться

Попробуйте следующее: 

UIImageView* rotatingImage = [[UIImageView alloc] init]];
[rotatingImage setImage:[UIImage imageNamed:@"someImage.png"]];

CATransform3D rotationTransform = CATransform3DMakeRotation(1.0f * M_PI, 0, 0, 1.0);
CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

rotationAnimation.toValue = [NSValue valueWithCATransform3D:rotationTransform];
rotationAnimation.duration = 0.25f;
rotationAnimation.cumulative = YES;
rotationAnimation.repeatCount = 1;

[rotatingImage.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];
1
ответ дан 1 December 2019 в 13:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: