火猴之抽奖大转盘（firemonkey）

活动中往往有抽奖环节，如何使用firemonkey制作一个抽奖的程序呢？

效果：

思路：

    1、rectangle+line+text作为可以转动的转盘和指针以及按钮。

    2、pie 共 10个作为不同颜色的底。（每个startangle和endangle不同，fill.color）

 

name	startangle	endangle	Fill.Color
pie 1	0	36	#FF2D71DC
pie 2	36	72	#FFFEDE71
pie 3	72	108	#FFFE6400
pie 4	108	144	#FFFEDE71
pie 5	144	180	#FF99CE40
pie 6	180	216	#FFFEDE71
pie 7	216	252	#FFA63BC7
pie8	252	288	#FFFEDE71
pie9	288	324	#FFD9004F
pie10	324	360	#FFFEDE71

    3、Arc作为最外圈。

    4、使用floatanimation来控制rectangle的转动角度。 

 

组件属性设置：

Text1：

object Text1: TText
  Align = Center
  Cursor = crHandPoint
  Size.Width = 113.000000000000000000
  Size.Height = 89.000000000000000000
  
  Text = 开始抽奖
  TextSettings.Font.Family = 琥珀
  TextSettings.Font.Size = 42.000000000000000000
  TextSettings.FontColor = xFFB90241
  OnClick = Text1Click
  object ShadowEffect1: TShadowEffect //阴影
    Trigger = 'IsMouseOver=true'
  end
  object FloatAnimation1: TFloatAnimation //移动文字的横坐标
    Duration = 0.200000002980232200
    PropertyName = 'Position.X'
    StartValue = 28.000000000000000000
    StopValue = 30.000000000000000000
    Trigger = 'IsMouseOver=true'
    TriggerInverse = 'IsMouseOver=false'
  end
  object FloatAnimation2: TFloatAnimation//移动文字的纵坐标
    Duration = 0.200000002980232200
    PropertyName = 'Position.Y'
    StartValue = 40.000000000000000000
    StopValue = 43.000000000000000000
    Trigger = 'IsMouseOver=true'
    TriggerInverse = 'IsMouseOver=false'//反向动作
  end
 
end

circle1： 

 

object Circle1: TCircle
  Align = Center
  Fill.Color = xFFFCED73
  Size.Width = 170.000000000000000000
  Size.Height = 170.000000000000000000 
  Stroke.Color = xFFD11702
  Stroke.Thickness = 0.000000000000000000
end

 

circle2：

​​​​object Circle2: TCircle //外边为红色，里面填充色为黄色
  Align = Center
  Fill.Color = xFFFCED73
  Size.Width = 249.000000000000000000
  Size.Height = 209.000000000000000000 
  Stroke.Color = xFFD11702
  Stroke.Thickness = 20.000000000000000000  
  object Line1: TLine //柱状指针
    Cursor = crHandPoint
    LineType = Diagonal
    Position.X = 117.000000000000000000
    Position.Y = -32.000000000000000000
    Size.Width = 17.000000000000000000
    Size.Height = 113.000000000000000000   
    Stroke.Color = xFFD11702
    Stroke.Thickness = 20.000000000000000000
  end
  object FloatAnimation5: TFloatAnimation //动画组件来控制圆盘2的旋转角度
    Duration = 3.000000000000000000
    Interpolation = Quadratic //渐变加速而不是线性
    PropertyName = 'RotationAngle'
    StartValue = 0.000000000000000000
    StopValue = 36000.000000000000000000
  end
end

pie1~10 ：

object Pie1: TPie
  Align = Center //居layout容器的中央
  Fill.Color = xFF2D71DC //10个颜色，1,3,5,7,9颜色不同，2,4,6,8,10颜色相同
  Size.Width = 476.999938964843800000
  Size.Height = 476.999969482421900000
  Size.PlatformDefault = False
  Stroke.Thickness = 0.000000000000000000
  StartAngle = 0.000000000000000000 //开始角度不同
  EndAngle = 36.000000000000000000  //结束角度不同
 
end

Arc1：

object Arc1: TArc
  Align = Center
  Size.Width = 477.000000000000000000 //x同y大小一样
  Size.Height = 477.000000000000000000
  Stroke.Kind = Gradient //颜色渐变色
  Stroke.Gradient.Points = <
    item
      Color = xFFFA8E36
      Offset = 0.000000000000000000
    end
    item
      Color = xFFDE1E09
      Offset = 1.000000000000000000
    end>
  Stroke.Gradient.StartPosition.Y = 0.080450206995010380
  Stroke.Gradient.StopPosition.X = 1.000000000000000000
  Stroke.Gradient.StopPosition.Y = 0.919549763202667300
  Stroke.Thickness = 25.000000000000000000
  Stroke.Join = Round
  EndAngle = 360.000000000000000000 //圆形

  object ShadowEffect2: TShadowEffect //加阴影
    Distance = 3.000000000000000000
    Direction = 45.000000000000000000
    Softness = 0.300000011920929000
    Opacity = 0.600000023841857900
    ShadowColor = claBlack
  end
end

代码：

procedure TForm3.Text1Click(Sender: TObject);
begin
  FloatAnimation5.Enabled := false;
  self.FloatAnimation5.StopValue := 15 * Random(1000); //随机设置角度
  self.FloatAnimation5.Enabled := True;
//Self.GradientAnimation1.Enabled:=True;
end;

代码下载：

链接：https://pan.baidu.com/s/1oH2mAWWg1iFBki134uddGw 
提取码：o0l0