在 UWP 中使用 Composition 制作移动圆圈

Question

我刚开始使用 Composition class 访问 UWP 中的可视化层。
我正在尝试更改一个简单的程序，将在特定区域 (canvas) 中移动的圆圈从 p5.js 更改为 UWP 组合。
但是我陷入了在构图和定义移动功能中做圈子的困境。

下面的gif动图是我想在UWP中合成的class。

为了帮助您理解，我从 daniel shiffman 编写的 nature of code 中复制了源代码 java-script 源代码。

var m;
function setup()
{
    createCanvas(320, 160);
    frameRate(60);
    m =new  Mover(
                      createVector(random(width), random(height)), 
                      createVector(random(-5, 5), random(-5, 5))
                      );
}

function draw()
{
    background(255,100,100);

    m.display();
    m.update();
    m.chkEdge();
}

class Mover
{
    constructor(loc, vel)
    {
        this.loc = loc;
        this.vel = vel;
    }

    update() {
        this.acc = createVector(random(-1, 1), random(-1, 1));
        this.loc.add(this.vel);
        this.vel.add(this.acc);
        this.vel.limit(5);
    }
    display() {
        stroke(0);  
        fill(175);
        ellipse(this.loc.x, this.loc.y, 15, 15); 
    }
    chkEdge() {
         if ( this.loc.x > width) this.loc.x =0;
         else if ( this.loc.x<0) this.loc.x =width;
         if ( this.loc.y> height) this.loc.y = 0;
         else if (this.loc.y<0) this.loc.y=height;
    }
}

我想在 UWP 中完全相同地编写这个程序，但正如我之前所说，我不知道如何使圆形精灵可视化以及如何使我的精灵在完成功能后视觉移动。

下面是我的升C源。

        public MainPage()
    {
        this.InitializeComponent();

        var ran = new Random();
        Vector3 velocity = new Vector3(30, 30, 0);
        Vector3 accel = new Vector3(ran.Next(-1, 1), ran.Next(-1, 1), 0);

        var cnv = ElementCompositionPreview.GetElementVisual(mainCnv);
        var compositor = cnv.Compositor;
        var visual = compositor.CreateSpriteVisual();
        visual.Brush = compositor.CreateColorBrush(Color.FromArgb(100, 0, 100, 200));

        visual.Size = new Vector2(100f, 50.75f); // I want to make this circle

        visual.Offset = new Vector3(  // offset
            ran.Next(0, (int)mainCnv.Width),
            ran.Next(0, (int)mainCnv.Height),
            0); 

        ElementCompositionPreview.SetElementChildVisual(mainCnv, visual);

        //while(true)
        {

            Vector3KeyFrameAnimation animation = compositor.CreateVector3KeyFrameAnimation();

            animation.InsertKeyFrame(
                1.0f,
                visual.Offset + velocity // ......... 
            );
            animation.Duration = TimeSpan.FromSeconds(5);
            //animation.IterationCount = 1;
            animation.IterationBehavior = AnimationIterationBehavior.Forever;
            visual.StartAnimation("Offset", animation);

            //visual.Offset +=velocity; // this statement does not work.
            velocity += accel; //accel should be added velocity after behavior........
        }

    }

在mainPage.xaml中我刚刚定义了"mainCnv"canvas.
下面是我用 UWP 创建的 gif 动画。我不能让它动啊动啊动啊。它只是在同一个地方之间反复移动。

是否可以在 UWP 中制作相同的程序？
如果我做不到，我可以使用 Xaml.UI 图层。我只是好奇我可以在作文中做同样的事情。
感谢您的阅读。

Answer 1

根据您的要求，您可以使用Win2D来处理。还有你提到的相关code sample。

public void Update(Size controlSize)
{
    // Move the ball.
    Position += Velocity;

    // Bounce if we hit the edge.
    Vector2 topLeft = new Vector2(Radius);
    Vector2 bottomRight = controlSize.ToVector2() - new Vector2(Radius);

    float bounceX = (Position.X < topLeft.X || Position.X > bottomRight.X) ? -1 : 1;
    float bounceY = (Position.Y < topLeft.Y || Position.Y > bottomRight.Y) ? -1 : 1;

    Velocity *= new Vector2(bounceX, bounceY);

    Position = Vector2.Clamp(Position, topLeft, bottomRight);

    // Gradually fade in and out.
    FadeAge += FadeSpeed;
}

在 UWP 中使用 Composition 制作移动圆圈

Making moving circle with Composition in UWP

javascript

c#

uwp

uwp-xaml