【问题标题】:iOS animate a Bezier curve with ceraiin durationiOS 为具有特定持续时间的贝塞尔曲线制作动画
【发布时间】:2014-12-10 06:42:14
【问题描述】:

如何在 iOS 中为给定的贝塞尔曲线制作动画,以便在给定时间内从起点绘制到终点。请看下面的动画。

【问题讨论】:

    标签: ios animation bezier


    【解决方案1】:

    贝泽路径

    // set up properties for path
    @property (nonatomic, assign) CGPath startPath;
    @property (nonatomic, assign) CGPath endPath;
    @property (nonatomic, strong) CAShapeLayer *pathLayer;
    
    // create the startPath
    UIBezierPath *path = [UIBezierPath //create your path using the paint code code
    self.startPath = path.CGPath;
    
    // create the end path
    path = [UIBezierPath //create your path using the paint code code
    self.endPath = path.CGPath;
    
    // create the shapee layer
    self.pathLayer = [CAShapeLayer layer];
    self.pathLayer.path = self.startPath;
    //also set line width, colour, shadows, etc...
    
    [self.view.layer addSubLayer:self.pathLayer];
    
    - (void)animatePath
    {
        [UIView animateWithDuration:2.0
            animations^() {
                // set the animation block variables as suggested in imageview animation.
        }];
    }
    

    图像视图

    您可以使用 UIViewAnimation 块轻松实现此目的。获取显示整个部分的精确图像(例如:image1.png)。现在是代码:

    [myImageView setImage: [UIImage imageNamed:@"image1.png"]];
    [myImageView setFrame: CGRectMake(0, 0, 0, 100)]; //for example width = 100 and height = 100 is required
    
    [UIView animateWithDuration:0.5
                          delay:1.0
                        options: UIViewAnimationCurveEaseOut
                     animations:^{
                         [myImageView setFrame: CGRectMake(0, 0, 100, 100)];
                     } 
                     completion:^(BOOL finished){
                         NSLog(@"Done!");
                     }];
    

    根据您的要求更改此代码,例如时间、自动重复或完成块等。

    希望这会有所帮助。

    【讨论】:

    • 感谢您的回答,但正如我在问题中所说,给出的是贝塞尔曲线,而不是图像。我不是在动画图像之后。我正在为给定的贝塞尔曲线制作动画。
    • 添加了贝塞尔动画块的答案。您的贝塞尔路径只不过是 UILayer。
    • 谢谢,你给了我有价值的信息去哪里看,但是 startPath 和 endPath 是什么意思,我只有一条路径,而不是两条。我想在 0.8 秒内开始绘制从单点(路径的起点)到路径终点的单条路径。
    • 对不起,忽略那些,我已经复制了那个代码块供你从某个地方参考。对于您的代码,self.pathlayer.path = self.myBezierPath.
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多