SpriteKit:如何对圆形矩形进行动画绘制

Question

我想动画一个圆形框的图纸。我已经看到一个人使用CGLinePath绘制房屋形状的答案。老实说，我认为这很整洁。

我对核心动画以及如何在SKScene中实现它一无所知。我不知道您会添加什么样的东西。我已经看到了几个不同的解决方案，以便可以使用核心动画去哪里，但这并没有帮助我在场景中绘制我的圆形矩形作为节点。

我已经看到了一个人，一个人使用核心动画来绘制一个圆圈，然后将其加载到 UIView：圆圈的动画图

我希望这是一个节点，因此我可以在其中应用一些SKAction。

Answer 1

使用skshapenode与动作。

此详细信息带有Skshapenode的圆形矩形：SKSpriteNode-创建一个圆角节点？

现在只用动作来动画更改。

Answer 2

添加到答案中，因为op清楚地请求中风长度的动画，并指出没有剥离。取而代之的是，您可以通过提供基于Skshader的一些属性v_path_distance和u_path_length输出的自定义strokeShader来为Skshapenode的路径动画。请注意，在u_current_percentage下方提供的着色器中，我们添加了我们要抚摸的路径中的当前点。因此，场景决定了动画抚摸的节奏。另请注意，strokeShader作为片段着色器，在每个步骤中输出RGB，它允许您在颜色时控制颜色，如果您愿意，可以使笔触成为渐变的颜色。

着色器作为文件添加到Xcode Project animateStroke.fsh：

void main()
{
    if ( u_path_length == 0.0 ) {
        gl_FragColor = vec4( 0.0, 0.0, 1.0, 1.0 ); // draw blue // this is an error
    } else if ( v_path_distance / u_path_length <= u_current_percentage ) {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 ); // draw red
    } else {
        gl_FragColor = vec4( 0.0, 0.0, 0.0, 0.0 ); // draw nothing
    }
}

和样本SKScene子类使用它：

import SpriteKit
import GameplayKit

func shaderWithFilename( _ filename: String?, fileExtension: String?, uniforms: [SKUniform] ) -> SKShader {
    let path = Bundle.main.path( forResource: filename, ofType: fileExtension )
    let source = try! NSString( contentsOfFile: path!, encoding: String.Encoding.utf8.rawValue )
    let shader = SKShader( source: source as String, uniforms: uniforms )
    return shader
}
class GameScene: SKScene {
    let strokeSizeFactor = CGFloat( 2.0 )
    var strokeShader: SKShader!
    var strokeLengthUniform: SKUniform!
    var _strokeLengthFloat: Float = 0.0
    var strokeLengthKey: String!
    var strokeLengthFloat: Float {
        get {
            return _strokeLengthFloat
        }
        set( newStrokeLengthFloat ) {
            _strokeLengthFloat = newStrokeLengthFloat
            strokeLengthUniform.floatValue = newStrokeLengthFloat
        }
    }
    override func didMove(to view: SKView) {
        strokeLengthKey = "u_current_percentage"
        strokeLengthUniform = SKUniform( name: strokeLengthKey, float: 0.0 )
        let uniforms: [SKUniform] = [strokeLengthUniform]
        strokeShader = shaderWithFilename( "animateStroke", fileExtension: "fsh", uniforms: uniforms )
        strokeLengthFloat = 0.0
        let cameraNode = SKCameraNode()
        self.camera = cameraNode
        // make your rounded rect
        let path = CGMutablePath()
        path.addRoundedRect(in: CGRect( x: 0, y: 0, width: 200, height: 150 ), cornerWidth: 35, cornerHeight: 35, transform: CGAffineTransform.identity )
        // note that prior to a fix in iOS 10.2, bug #27989113  "SKShader/SKShapeNode: u_path_length is not set unless shouldUseLocalStrokeBuffers() is true" requires that a path be "long" - past a certain number of points - I don't know how many. So if the rounded rect doesn't work for you on iOS 10 - iOS 10.1, try this path instead: 
        // let path1 = CGMutablePath()
        // path1.move( to: CGPoint.zero )
        // path1.addLine( to: CGPoint( x: 0, y: strokeHeight ) )
        // for i in 0...15 {
        //    path.addLine( to: CGPoint( x: 0, y: strokeHeight + CGFloat( 0.001 ) * CGFloat( i ) ) )
        // }            
        // path.closeSubpath()            
        let strokeWidth = 17.0 * strokeSizeFactor
        let shapeNode = SKShapeNode( path: path )
        shapeNode.lineWidth = strokeWidth
        shapeNode.lineCap = .round
        shapeNode.addChild( cameraNode )
        shapeNode.strokeShader = strokeShader
        shapeNode.calculateAccumulatedFrame()
        addChild( shapeNode )
        // center the camera
        cameraNode.position = CGPoint( x: shapeNode.frame.size.width/2.0, y: shapeNode.frame.size.height/2.0 )

    }
    override func update(_ currentTime: TimeInterval) {
        // the increment chosen determines how fast the path is stroked. Note this maps to "u_current_percentage" within animateStroke.fsh
        strokeLengthFloat += 0.01
        if strokeLengthFloat > 1.0 {
            strokeLengthFloat = 0.0
        }
    }
}